Yatırma ve Rotasyon

Platform seçin: Android iOS JavaScript

Örnek Görüntüle

Genel Bakış

Haritayı başlatırken heading ve tilt özelliklerini ekleyerek ve harita üzerinde setTilt ve setHeading yöntemlerini çağırarak vektor haritasında eğimi ve dönüşümü (yön) ayarlayabilirsiniz. Aşağıdaki örnekte, haritaya eğimi ve yönü 20 derecelik artışlarla programlı olarak ayarlama işlemini 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ğilme ve döndürme (yön) kullanıcı etkileşimleri etkinleştirildiyse (programlı olarak veya Google Cloud Console'da) kullanıcılar eğilme ve döndürme ayarlarını fare ve klavye kullanarak yapabilir:

  • Fareyle, Üst Karakter tuşunu basılı tutun, ardından fareyi tıklayıp yukarı ve aşağı sürükleyerek eğimi, sağa ve sola sürükleyerek de yönünü ayarlayın.
  • Klavyeyi kullanarak, Üst Karakter tuşunu basılı tutun, ardından eğimi ayarlamak için yukarı ve aşağı ok tuşlarını, yönünü ayarlamak için de sağ ve sol ok tuşlarını kullanın.

Eğimi ve yönü programatik olarak ayarlama

Bir vektör haritasındaki eğimi ve yönünü programatik olarak ayarlamak için setTilt() ve setHeading() yöntemlerini kullanın. Yön, kameranın kuzeyden başlayarak saat yönündeki derecelerde baktığı yöndür. Bu nedenle map.setHeading(90), haritayı doğu yukarı bakacak şekilde döndürür. Eğim açısı zirve noktasından ölçülür. Bu nedenle map.setTilt(0) doğrudan aşağı bakarken map.setTilt(45) eğik bir görünüm sağlar.

  • Haritanın eğim açısını ayarlamak için setTilt() işlevini çağırın. Mevcut eğim değerini almak için getTilt() değerini kullanın.
  • Haritanın başlığını ayarlamak için setHeading()'ü arayın. Mevcut başlık değerini almak için getHeading() değerini kullanın.

Eğimi ve yönü koruyarak haritanın merkezini değiştirmek için map.setCenter() veya map.panBy() tuşlarını kullanın.

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

Başlığı, eğimi, merkezi 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 eğilme veya döndürme uygulandığında diğer Maps JavaScript API yöntemlerinin davranışı etkilenir:

  • map.getBounds() her zaman görünen bölgeyi içeren en küçük sınır kutusuyla döndürür; eğim uygulandığında döndürülen sınırlar, haritanın görüntü alanının görünen bölgesinden daha büyük bir bölgeyi temsil edebilir.
  • map.fitBounds(), sınırları yerleştirmeden önce eğimi ve yönünü sıfıra sıfırlar.
  • map.panToBounds(), sınırları kaydırmadan önce eğimi ve yönünü sıfıra sıfırlar.
  • map.setTilt() herhangi bir değeri kabul eder ancak maksimum eğimi mevcut 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.