Yatırma ve Rotasyon

Platform seçin: Android iOS JavaScript

Örneği Göster

Genel bakış

Haritayı başlatırken heading ve tilt özelliklerini ekleyerek ve harita üzerinde setTilt ve setHeading yöntemlerini çağırarak vektör haritasında yatırma ve döndürme (başlık) özelliğini ayarlayabilirsiniz. Aşağıdaki örnekte haritaya, yatırma ve yönü 20 derecelik artışlarla programlı bir şekilde ayarlamayı gösteren bazı düğmeler eklenmiştir.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: {
        lat: 37.7893719,
        lng: -122.3942,
      },
      zoom: 16,
      heading: 320,
      tilt: 47.5,
      mapId: "90f87356969d889c",
    }
  );

  const buttons: [string, string, number, google.maps.ControlPosition][] = [
    ["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER],
    ["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER],
    ["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER],
    ["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER],
  ];

  buttons.forEach(([text, mode, amount, position]) => {
    const controlDiv = document.createElement("div");
    const controlUI = document.createElement("button");

    controlUI.classList.add("ui-button");
    controlUI.innerText = `${text}`;
    controlUI.addEventListener("click", () => {
      adjustMap(mode, amount);
    });
    controlDiv.appendChild(controlUI);
    map.controls[position].push(controlDiv);
  });

  const adjustMap = function (mode: string, amount: number) {
    switch (mode) {
      case "tilt":
        map.setTilt(map.getTilt()! + amount);
        break;
      case "rotate":
        map.setHeading(map.getHeading()! + amount);
        break;
      default:
        break;
    }
  };
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 37.7893719,
      lng: -122.3942,
    },
    zoom: 16,
    heading: 320,
    tilt: 47.5,
    mapId: "90f87356969d889c",
  });
  const buttons = [
    ["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER],
    ["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER],
    ["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER],
    ["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER],
  ];

  buttons.forEach(([text, mode, amount, position]) => {
    const controlDiv = document.createElement("div");
    const controlUI = document.createElement("button");

    controlUI.classList.add("ui-button");
    controlUI.innerText = `${text}`;
    controlUI.addEventListener("click", () => {
      adjustMap(mode, amount);
    });
    controlDiv.appendChild(controlUI);
    map.controls[position].push(controlDiv);
  });

  const adjustMap = function (mode, amount) {
    switch (mode) {
      case "tilt":
        map.setTilt(map.getTilt() + amount);
        break;
      case "rotate":
        map.setHeading(map.getHeading() + amount);
        break;
      default:
        break;
    }
  };
}

window.initMap = initMap;
index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.ui-button {
  background-color: #fff;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  margin: 10px;
  padding: 0 0.5em;
  font: 400 18px Roboto, Arial, sans-serif;
  overflow: hidden;
  height: 40px;
  cursor: pointer;
}
.ui-button:hover {
  background: rgb(235, 235, 235);
}

style.css

HTML

<html>
  <head>
    <title>Tilt and Rotation</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

Örneği Deneyin

Fare ve klavye hareketlerini kullanma

Eğme ve döndürme (Yön) kullanıcı etkileşimleri etkinleştirildiyse (programlı olarak veya Google Cloud Console'da) kullanıcılar fare ve klavyeyi kullanarak yatırma ve döndürmeyi ayarlayabilir:

  • Fareyi kullanarak ÜstKrktr tuşunu basılı tutun ve ardından eğmeyi ayarlamak için fareyi tıklayıp yukarı ve aşağı, başlığı ayarlamak için sağa ve sola sürükleyin.
  • Klavyede ÜstKrktr tuşunu basılı tutun, ardından eğmeyi ayarlamak için yukarı ve aşağı ok tuşlarını, yönü ayarlamak için sağ ve sol ok tuşlarını kullanın.

Eğimi ve yönü programlı olarak ayarlama

Bir vektör haritasında eğimi ve yönü programlı olarak ayarlamak için setTilt() ve setHeading() yöntemlerini kullanın. Yön, kameranın kuzeyden başlayarak saat yönünde baktığı yöndür. Bu nedenle map.setHeading(90), haritayı doğuya doğru bakacak şekilde döndürür. Eğme açısı tepe noktasından itibaren ölçülür. Bu nedenle map.setTilt(0) dik bir şekilde aşağı bakarken map.setTilt(45) eğik bir görünüm elde eder.

  • Haritanın yatırma açısını ayarlamak için setTilt() numaralı telefonu arayın. Mevcut eğme değerini elde etmek için getTilt() kullanın.
  • Haritanın başlığını ayarlamak için setHeading() numaralı telefonu arayın. Mevcut başlık değerini almak için getHeading() kullanın.

Yatırmayı ve yönü korurken harita merkezini değiştirmek için map.setCenter() veya map.panBy() özelliğini kullanın.

Kullanılabilen açı aralığının mevcut yakınlaştırma düzeyine göre değişeceğini unutmayın. Bu aralığın dışındaki değerler, geçerli olarak izin verilen aralığa ayarlanır.

Yön, yatırma, ortaya ve yakınlaştırmayı programlı bir şekilde değiştirmek için moveCamera yöntemini de kullanabilirsiniz. Daha fazla bilgi

Diğer yöntemler üzerindeki etkisi

Haritaya yatırma veya döndürme uygulandığında, diğer Maps JavaScript API yöntemlerinin davranışı etkilenir:

  • map.getBounds(), her zaman görünür bölgeyi içeren en küçük sınırlayıcı kutuyu döndürür. Eğme uygulandığında döndürülen sınırlar, harita görüntü alanının görünür alanından daha geniş bir bölgeyi temsil edebilir.
  • map.fitBounds(), sınırları uymadan önce eğimi ve yönü sıfırlar.
  • map.panToBounds(), sınırları kaydırmadan önce eğimi ve yönü sıfırlayacak.
  • map.setTilt() her değeri kabul eder ancak maksimum yatırmayı geçerli harita yakınlaştırma düzeyine göre kısıtlar.
  • map.setHeading(), herhangi bir değeri kabul eder ve [0, 360] aralığına sığacak şekilde değiştirir.