Overlay Bumi

1. Pengantar
2. Menambahkan overlay bumi
3. Menghapus overlay bumi

Pengantar

Overlay adalah objek di peta yang terikat dengan koordinat garis lintang/garis bujur, sehingga ikut bergerak jika Anda menarik atau memperbesar/memperkecil tampilan peta. Jika ingin menempatkan gambar pada peta, Anda dapat menggunakan objek GroundOverlay.

Untuk informasi tentang jenis overlay lainnya, lihat Menggambar pada peta.

Menambahkan overlay bumi

Konstruktor untuk GroundOverlay menetapkan URL gambar dan LatLngBounds gambar sebagai parameter. Gambar akan dirender pada peta, dengan batas yang diberikan, dan disesuaikan dengan proyeksi peta.

// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.

let historicalOverlay;

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 13,
      center: { lat: 40.74, lng: -74.18 },
    }
  );

  const imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655,
  };

  historicalOverlay = new google.maps.GroundOverlay(
    "https://storage.googleapis.com/geo-devrel-public-buckets/newark_nj_1922-661x516.jpeg",
    imageBounds
  );
  historicalOverlay.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.
let historicalOverlay;

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 13,
    center: { lat: 40.74, lng: -74.18 },
  });
  const imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655,
  };

  historicalOverlay = new google.maps.GroundOverlay(
    "https://storage.googleapis.com/geo-devrel-public-buckets/newark_nj_1922-661x516.jpeg",
    imageBounds,
  );
  historicalOverlay.setMap(map);
}

window.initMap = initMap;
index.js

Menghapus overlay bumi

Untuk menghapus overlay dari peta, panggil metode setMap() overlay, dengan meneruskan null. Perhatikan, memanggil metode ini tidak menghapus overlay secara permanen. Tindakan ini hanya menghapus overlay dari peta. Jika ingin menghapus overlay secara permanen, Anda harus menghapusnya dari peta, lalu menetapkan overlay itu sendiri ke null.

function removeOverlay() {
  historicalOverlay.setMap(null);
}

Lihat contoh