Übersicht
Die Google Maps API umfasst Kartenkacheln für verschiedene Zoomstufen für Kartenbilder. Die meisten Bilder für Straßenkarten sind z. B. in den Zoomstufen 0 bis 18 verfügbar. Satellitenbilder variieren stärker, da sie nicht generiert, sondern direkt fotografiert werden.
Da Satellitenbilder für abgelegene Orte – kaum besiedelte Gebiete oder das offene Meer – nicht immer in hohen Zoomstufen verfügbar sind, kann es sinnvoll sein, die höchste Zoomstufe für die Bilder eines bestimmten Ortes im Voraus zu ermitteln. Das MaxZoomService
-Objekt bietet eine einfache Schnittstelle zum Ermitteln der maximalen Zoomstufe an einem Ort, für den Google Maps Satellitenbilder zur Verfügung stellen kann.
MaxZoom-Anfragen
Der Zugriff auf MaxZoomService
erfolgt asynchron, da die Google Maps API dazu einen externen Server aufrufen muss. Daher muss eine Callback-Methode übergeben werden, die nach Abschluss der Anfrage ausgeführt wird. Das Ergebnis wird dann über die Callback-Methode verarbeitet.
Zum Initiieren einer Anfrage an MaxZoomService
rufen Sie getMaxZoomAtLatLng()
auf, wodurch die LatLng
-Werte des Ortes sowie eine Callback-Funktion übergeben werden, die nach Abschluss der Anfrage ausgeführt werden soll.
MaxZoom-Antworten
Wenn getMaxZoomAtLatLng()
die Callback-Funktion ausführt, werden diese zwei Parameter zurückgegeben:
status
enthält denMaxZoomStatus
der Anfrage.zoom
enthält die Zoomstufe. Wenn beim Ausführen des Diensts ein Fehler auftritt, wird kein Wert angezeigt.
Der status
-Code gibt einen der folgenden Werte zurück:
OK
gibt an, dass der Dienst die maximale Zoomstufe für Satellitenbilder ermittelt hat.ERROR
gibt an, dass die MaxZoom-Anfrage nicht verarbeitet werden konnte.
Im folgenden Beispiel ist eine Karte des Großraums Tokio zu sehen. Durch Klicken auf eine beliebige Stelle der Karte wird die maximale Zoomstufe für den jeweiligen Ort angezeigt. Die Zoomstufen für den Großraum Tokio liegen in der Regel zwischen 18 und 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;