Yatırma ve Rotasyon

Platform seçin: Android iOS JavaScript

Örneği Görüntüle

Genel Bakış

Vektör haritasında yatırma ve döndürme (yön) özelliklerini ayarlayabilirsiniz. Haritayı başlatırken heading ve tilt özelliklerini dahil ederek ve haritada setTilt ve setHeading yöntemlerini çağırarak. Aşağıdakiler örnek, haritaya eğimi programatik olarak ayarlamayı gösteren bazı düğmeler ekler 20 derecelik artışlarla açın.

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

Yatırma ve döndürme (başlığı) kullanıcı etkileşimleri etkinleştirilmişse (veya manuel olarak veya Google Cloud Console üzerinden) analiz ettiğinizde, kullanıcılar ve döndürmeyi sağlar:

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

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

Eğimi programatik olarak ayarlamak için setTilt() ve setHeading() yöntemlerini kullanın bir vektör haritasında yer alır. Yön, kameranın baktığı yöndür kuzeyden başlayıp saat yönünde bir derece sağlayacak şekilde map.setHeading(90) haritayı döndürecektir olması gerekir. Eğme açısı zenitten ölçülür, dolayısıyla map.setTilt(0) düz aşağı bakarken map.setTilt(45) ile sonuçlanacak Eğik görünümde sunulur.

  • Haritayı yatırma açısını ayarlamak için setTilt() numaralı telefonu arayın. getTilt() hareketini kullanarak mevcut eğim değeri.
  • Haritanın yönünü belirlemek için setHeading() numaralı telefonu arayın. Şunları almak için getHeading() kullanın: <heading> değerini alır.

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

Kullanılabilen açı aralığının mevcut yakınlaştırmaya göre değişebileceğini unutmayın seviyesidir. Bu aralığın dışındaki değerler şu anda izin verilen değere ayarlanır aralığı.

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

Diğer yöntemler üzerindeki etkisi

Haritaya yatırma veya döndürme uygulandığında, diğer Maps JavaScript API'nin davranışı nasıl etkilediğini öğrenin:

  • map.getBounds(), her zaman görünür bölge; yatırma uygulandığında, döndürülen sınırlar bir görüntü alanının görünür bölgesinden daha büyük bir bölge.
  • map.fitBounds(), yatırmadan önce yatırmayı ve yön yönünü sıfıra sıfırlar. sınırlar.
  • map.panToBounds(), yatay kaydırmadan önce yatırmayı ve yönü sıfıra sıfırlar sınırlar.
  • map.setTilt() tüm değerleri kabul eder ancak mevcut harita yakınlaştırma düzeyine gidin.
  • map.setHeading() tüm değerleri kabul eder ve [0, 360] değerlerinden birini seçin.