Kemiringan dan Rotasi

Pilih platform: Android iOS JavaScript

Lihat Contoh

Ringkasan

Anda dapat menetapkan kemiringan dan rotasi (arah) di peta vektor dengan menyertakan properti heading dan tilt saat menginisialisasi peta, dan dengan memanggil metode setTilt dan setHeading di peta. Contoh berikut menambahkan beberapa tombol ke peta yang menampilkan penyesuaian kemiringan dan arah secara terprogram dengan penambahan sebesar 20 derajat.

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

Mencoba Contoh

Menggunakan mouse dan gestur keyboard

Jika interaksi pengguna kemiringan dan rotasi (arah) telah diaktifkan (baik secara terprogram maupun di Konsol Google Cloud), pengguna dapat menyesuaikan kemiringan dan rotasi menggunakan mouse dan keyboard:

  • Menggunakan mouse, tahan tombol shift, lalu klik dan tarik mouse ke atas dan ke bawah untuk menyesuaikan kemiringan, serta ke kanan dan ke kiri untuk menyesuaikan arah.
  • Menggunakan keyboard, tahan tombol shift, lalu gunakan tombol panah atas dan bawah untuk menyesuaikan kemiringan, serta tombol panah kanan dan kiri untuk menyesuaikan arah.

Menyesuaikan kemiringan dan arah secara terprogram

Gunakan metode setTilt() dan setHeading() untuk menyesuaikan kemiringan dan arah secara terprogram pada peta vektor. Arah adalah arah hadap kamera dalam derajat searah jarum jam yang dimulai dari utara. Jadi, jika Anda menetapkan map.setHeading(90), peta akan berotasi sehingga timur menghadap ke atas. Sudut kemiringan diukur dari zenit, sehingga map.setTilt(0) melihat lurus ke bawah, sedangkan map.setTilt(45) akan menghasilkan tampilan miring.

  • Panggil setTilt() untuk menetapkan sudut kemiringan peta. Gunakan getTilt() untuk mendapatkan nilai kemiringan saat ini.
  • Panggil setHeading() untuk menetapkan arah peta. Gunakan getHeading() untuk mendapatkan nilai arah saat ini.

Untuk mengubah pusat peta sambil mempertahankan kemiringan dan arah, gunakan map.setCenter() atau map.panBy().

Perhatikan bahwa rentang sudut yang dapat digunakan bervariasi menurut tingkat zoom saat ini. Nilai di luar rentang ini akan dibulatkan ke rentang yang saat ini diizinkan.

Anda juga dapat menggunakan metode moveCamera untuk mengubah arah, kemiringan, posisi tengah, dan zoom secara terprogram. Pelajari lebih lanjut.

Dampak pada metode lain

Perilaku metode Maps JavaScript API lainnya akan terdampak oleh penerapan kemiringan atau rotasi pada peta:

  • map.getBounds() selalu menampilkan kotak pembatas terkecil yang menyertakan wilayah yang terlihat; saat kemiringan diterapkan, batas yang ditampilkan dapat mewakili wilayah yang lebih besar daripada wilayah yang terlihat di area pandang peta.
  • map.fitBounds() akan mereset kemiringan dan arah ke nol sebelum menyesuaikan batas.
  • map.panToBounds() akan mereset kemiringan dan arah ke nol sebelum menggeser batas.
  • map.setTilt() menerima nilai apa pun, tetapi membatasi kemiringan maksimum berdasarkan tingkat zoom peta saat ini.
  • map.setHeading() menerima nilai apa pun, dan akan memodifikasinya agar sesuai dengan rentang [0, 360].