Layanan Maximum Zoom Imagery

1. Maximum Zoom Imagery
2. Permintaan MaxZoom
3. Respons MaxZoom

Ringkasan

Google Maps API menyediakan ubin peta pada berbagai tingkat zoom untuk gambar jenis peta. Sebagian besar gambar peta jalan tersedia dari tingkat zoom 0 hingga 18, misalnya. Gambar satelit sangat bervariasi karena gambar ini tidak dibuat, melainkan langsung difoto.

Karena gambar satelit tidak selalu tersedia pada tingkat zoom tinggi untuk lokasi terpencil — area yang jarang penduduknya atau area laut terbuka - sebaiknya cari tahu terlebih dahulu tingkat zoom tertinggi untuk gambar di lokasi tertentu. Objek MaxZoomService menyediakan antarmuka yang sederhana untuk menemukan tingkat zoom maksimum di lokasi tertentu yang gambar satelitnya dimiliki Google Maps.

Permintaan MaxZoom

Akses MaxZoomService bersifat asinkron, karena Google Maps API perlu membuat panggilan ke server eksternal. Oleh karena itu, Anda perlu meneruskan metode callback untuk dieksekusi setelah permintaan selesai. Metode callback ini akan memproses hasilnya.

Untuk memulai permintaan ke MaxZoomService, panggil getMaxZoomAtLatLng(), yang meneruskan LatLng lokasi dan fungsi callback untuk dieksekusi setelah permintaan selesai.

Respons MaxZoom

Saat menjalankan fungsi callback, getMaxZoomAtLatLng() akan meneruskan kembali dua parameter:

• status berisi MaxZoomStatus permintaan.
• zoom berisi tingkat zoom. Jika karena suatu sebab layanan gagal, nilai ini tidak akan ada.

Kode status dapat menampilkan salah satu nilai berikut:

• OK menunjukkan bahwa layanan menemukan tingkat zoom maksimum untuk gambar satelit.
• ERROR menunjukkan bahwa permintaan MaxZoom tidak dapat diproses.

Contoh berikut menampilkan peta kota metropolitan Tokyo. Mengklik di mana saja pada peta akan menunjukkan tingkat zoom maksimum di lokasi itu. (Tingkat zoom di sekitar Tokyo biasanya bervariasi antara 18 dan 21.)

let map: google.maps.Map;
let maxZoomService: google.maps.MaxZoomService;
let infoWindow: google.maps.InfoWindow;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 11,
    center: { lat: 35.6894, lng: 139.692 },
    mapTypeId: "hybrid",
  });

  infoWindow = new google.maps.InfoWindow();

  maxZoomService = new google.maps.MaxZoomService();

  map.addListener("click", showMaxZoom);
}

function showMaxZoom(e: google.maps.MapMouseEvent) {
  maxZoomService.getMaxZoomAtLatLng(
    e.latLng as google.maps.LatLng,
    (result: google.maps.MaxZoomResult) => {
      if (result.status !== "OK") {
        infoWindow.setContent("Error in MaxZoomService");
      } else {
        infoWindow.setContent(
          "The maximum zoom at this location is: " + result.zoom
        );
      }

      infoWindow.setPosition(e.latLng);
      infoWindow.open(map);
    }
  );
}

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

let map;
let maxZoomService;
let infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: { lat: 35.6894, lng: 139.692 },
    mapTypeId: "hybrid",
  });
  infoWindow = new google.maps.InfoWindow();
  maxZoomService = new google.maps.MaxZoomService();
  map.addListener("click", showMaxZoom);
}

function showMaxZoom(e) {
  maxZoomService.getMaxZoomAtLatLng(e.latLng, (result) => {
    if (result.status !== "OK") {
      infoWindow.setContent("Error in MaxZoomService");
    } else {
      infoWindow.setContent(
        "The maximum zoom at this location is: " + result.zoom,
      );
    }

    infoWindow.setPosition(e.latLng);
    infoWindow.open(map);
  });
}

window.initMap = initMap;
index.js