最大縮放圖像服務

  1. 最大縮放圖像
  2. MaxZoom 要求
  3. MaxZoom 回應

總覽

Google Maps API 提供不同地圖類型的縮放等級地圖圖塊。例如,大部分藍圖圖可提供 0 至 18 的縮放等級。這個圖像會因產生的圖像而產生,但直接拍攝而來,衛星圖像的尺寸會有所不同。

由於衛星圖像可能無法在遠端位置的高縮放等級中使用,例如人口稀少的區域或開放式海洋地區,因此建議您事先瞭解指定位置的圖像的最高縮放等級。MaxZoomService 物件提供簡單的介面,方便您探索 Google 地圖在指定衛星上特定位置的最大縮放等級。

MaxZoom 要求

由於 Google Maps API 必須呼叫外部伺服器,因此存取 MaxZoomService 的過程並非同步。因此,您必須傳遞回呼方法,以便在要求完成時執行。這個回呼方法應處理結果。

如要向 MaxZoomService 發出要求,請呼叫 getMaxZoomAtLatLng(),並傳遞位置的 LatLng 以及要求完成時要執行的回呼函式。

MaxZoom 回應

getMaxZoomAtLatLng() 執行「回呼」函式時,會傳回兩個參數:

  • status 包含要求的 MaxZoomStatus
  • zoom 包含縮放等級。如果服務因故失敗,這個值就不會顯示。

status 程式碼可能會傳回下列其中一個值:

  • OK 表示服務已找到衛星圖像的最大縮放等級。
  • ERROR 表示無法處理 MaxMax 要求。

以下範例顯示東京都會區的地圖。 在地圖上任何一處按一下,代表該位置的最大縮放等級。(東京周圍的縮放等級通常在 18 到 21 之間)。

TypeScript

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;

JavaScript

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;
查看範例

查看範例