Kemiringan dan Rotasi

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Pilih platform: Android iOS JavaScript

Lihat Contoh

Ringkasan

Anda dapat menetapkan kemiringan dan rotasi (judul) pada peta vektor dengan menyertakan properti heading dan tilt saat menginisialisasi peta, serta dengan memanggil metode setTilt dan setHeading pada peta. Contoh berikut menambahkan beberapa tombol ke peta yang menampilkan penyesuaian kemiringan dan arah tujuan secara terprogram dalam peningkatan 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;

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;

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);
}

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
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=beta"
      defer
    ></script>
  </body>
</html>

Coba Sampel

Menggunakan mouse dan gestur keyboard

Anda dapat menyesuaikan kemiringan dan rotasi menggunakan mouse dan keyboard:

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

Menyesuaikan kemiringan dan arah secara terprogram

Gunakan metode setTilt() dan setHeading() untuk menyesuaikan kemiringan dan arah pada program secara terprogram pada peta vektor. Judul adalah arah hadap kamera dalam derajat searah jarum jam yang dimulai dari utara, sehingga map.setHeading(90) akan memutar peta 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 judul peta. Gunakan getHeading() untuk mendapatkan nilai judul saat ini.

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

Perhatikan bahwa rentang sudut yang dapat digunakan bervariasi dengan 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

Saat kemiringan atau rotasi diterapkan ke peta, perilaku metode Maps JavaScript API lainnya akan terpengaruh:

  • map.getBounds() selalu menampilkan kotak pembatas terkecil yang menyertakan region yang terlihat; saat kemiringan diterapkan, batas yang ditampilkan dapat mewakili area yang lebih besar daripada area yang terlihat di area pandang peta.
  • map.fitBounds() akan mereset kemiringan dan arah ke nol sebelum menyesuaikan batas.
  • map.panToBounds() akan mereset kemiringan dan judul 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].