Bu sayfa, Cloud Translation API ile çevrilmiştir.

Yatırma ve Rotasyon

Platformu seçin: Android iOS JavaScript

Genel bakış

Harita başlatılırken heading ve tilt özelliklerini ekleyip, haritadaki setTilt ve setHeading yöntemlerini çağırarak vektör haritasında eğim ve döndürmeyi (başlık) ayarlayabilirsiniz. Aşağıdaki örnekte haritaya, eğim ve yönü 20 derecelik artışlarla programatik olarak ayarlayan 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=beta"
      defer
    ></script>
  </body>
</html>index.html

Örneği Deneyin

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Fare ve klavye hareketlerini kullanma

Fare ve klavyeyi kullanarak eğme ve döndürme ayarlarını yapabilirsiniz:

Fareyi kullanarak üst karakter tuşunu basılı tutun, ardından başlığı ayarlamak için sağ ve sola doğru tıklayıp yukarı ve aşağı sürükleyin.
Klavyeyi kullanarak üst karakter tuşunu basılı tutun, ardından eğmeyi 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 başlığı programatik olarak ayarlama

Bir vektör haritasındaki eğim ve yönü programatik olarak ayarlamak için setTilt() ve setHeading() yöntemlerini kullanın. Yön, kuzeyden itibaren kameranın baktığı yöndür. Bu nedenle map.setHeading(90), doğu yönü yukarıya bakacak şekilde haritayı döndürür. Eğme açısı zenitten ölçülür. Bu durumda map.setTilt(0) doğrudan aşağı bakarken map.setTilt(45) eğik bir görünüme neden olur.

Haritanın eğim açısını ayarlamak için setTilt() numaralı telefonu arayın. Geçerli yatırma değerini almak 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() değerini kullanın.

Yatırmayı ve yönü korurken harita 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 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ığı, eğmeyi, 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 eğim 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ğim 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 uygulanmadan önce eğim ve yönü sıfırlar.
map.panToBounds(), sınırları kaydırmadan önce eğim ve başlığı sıfırlar.
map.setTilt() tüm değerleri kabul eder, ancak geçerli harita yakınlaştırma düzeyine göre maksimum eğimi kısıtlar.
map.setHeading() tüm değerleri kabul eder ve [0, 360] aralığına sığacak şekilde değiştirir.