總覽
Google Maps API 為地圖類型圖像提供各種縮放等級的地圖圖塊。舉例來說,大多數道路圖圖像可支援 0 到 18 的縮放等級。衛星圖像支援的縮放等級則有較大的差異,因為這類圖像是直接拍攝得出,而非產生出來的圖像。
衛星圖像不一定能使用高縮放等級查看偏遠地點 (人煙稀少地帶或廣闊海域),因此建議您事先瞭解特定地點的圖像支援哪個最高縮放等級。MaxZoomService
物件提供簡易介面,方便您瞭解 Google 地圖提供衛星圖像的特定地點支援哪個最大縮放等級。
MaxZoom 要求
Google Maps API 必須呼叫外部伺服器,因此 MaxZoomService
是以非同步的方式存取。基於這個理由,您必須傳遞在完成要求後執行的「回呼」方法。這個回呼方法會處理結果。
如要向 MaxZoomService
提出要求,請呼叫 getMaxZoomAtLatLng()
,並傳遞地點的 LatLng
,以及要求完成後要執行的回呼函式。
MaxZoom 回應
getMaxZoomAtLatLng()
執行「回呼」函式時,會傳回下列兩個參數:
status
包含要求的MaxZoomStatus
。zoom
包含縮放等級。如果服務因故失敗,就不會顯示這個值。
status
代碼可能會傳回下列其中一個值:
OK
表示服務找到衛星圖像的最大縮放等級。ERROR
表示無法處理 MaxZoom 要求。
下例是東京都會區地圖。只要點選地圖上的任何一處,就能看到該地點的最大縮放等級 (東京周圍的縮放等級通常在 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;