Yatırma ve Rotasyon

Platform seçin: Android iOS JavaScript

Örneği Görüntüle

Genel bakış

Haritayı başlatırken heading ve tilt özelliklerini dahil edip haritada setTilt ve setHeading yöntemlerini çağırarak vektör haritasında yatırma ve döndürme (yönlendirme) ayarlarını yapabilirsiniz. Aşağıdaki örnekte haritaya, yatırma ve yönü 20 derecelik artışlarla programatik olarak 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>

    <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 script 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 (başlık) kullanıcı etkileşimleri etkinleştirilmişse (programlı olarak veya Google Cloud Console'da) kullanıcılar, fare ve klavyeyi kullanarak yatırma ve döndürmeyi ayarlayabilir:

  • Fareyi kullanarak üst karakter tuşunu basılı tutun, ardından yatırmayı ayarlamak için fareyi tıklayıp yukarı ve aşağı, yönü ayarlamak için de sağa ve sola sürükleyin.
  • Klavyeyi kullanarak üst karakter tuşunu basılı tutun, ardından yatırmayı ayarlamak için yukarı ve aşağı ok tuşlarını, başlığı ayarlamak için sağ ve sol ok tuşlarını kullanın.

Yatırmayı ve yönü programatik olarak ayarlama

Vektör haritasında yatırma ve yönünüzü programatik 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. Dolayısıyla map.setHeading(90), haritayı doğu yukarı bakacak şekilde döndürür. Eğme açısı zenitten ölçülür. Dolayısıyla map.setTilt(0) düz aşağı bakarken map.setTilt(45), eğik bir görünüm sağlar.

  • Haritayı yatırma açısını ayarlamak için setTilt() numaralı telefonu arayın. Mevcut eğim değerini öğrenmek için getTilt() kullanın.
  • Haritanın yönünü belirlemek için setHeading() numaralı telefonu arayın. Geçerli 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() kullanın.

Kullanılabilen açı aralığının, mevcut yakınlaştırma seviyesine göre değiştiğini unutmayın. Bu aralığın dışındaki değerler, şu anda izin verilen aralığa ayarlanır.

Başlığı, yatırmayı, ortalamayı ve yakınlaştırmayı programatik olarak değiştirmek için moveCamera yöntemini de kullanabilirsiniz. Daha fazla bilgi edinin.

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, haritanın görüntü alanının görünür bölgesinden daha büyük bir bölgeyi temsil edebilir.
  • map.fitBounds(), sınırları aşmadan önce yatırmayı ve yönü sıfıra sıfırlar.
  • map.panToBounds(), sınırları kaydırmadan önce yatırmayı ve yönü sıfıra sıfırlar.
  • map.setTilt() tüm değerleri kabul eder ancak maksimum yatırmayı geçerli harita yakınlaştırma seviyesine göre kısıtlar.
  • map.setHeading() tüm değerleri kabul eder ve [0, 360] aralığına sığacak şekilde değiştirir.