Omówienie
Interfejs API Map Google udostępnia kafelki na różnych poziomach powiększenia obrazów w rodzaju mapy. Większość zdjęć map jest na przykład dostępna w poziomie powiększenia od 0 do 18. Zdjęcia satelitarne różnią się w większym stopniu, ponieważ nie są one generowane, ale bezpośrednio sfotografowane.
Ze względu na to, że zdjęcia satelitarne nie zawsze są dostępne przy wysokim powiększeniu w odległych lokalizacjach – słabo zaludnionych obszarach i otwartych obszarach oceanów – warto w pierwszej kolejności określić największy poziom powiększenia zdjęć w danej lokalizacji. Obiekt MaxZoomService
udostępnia prosty interfejs, który umożliwia poznanie maksymalnego poziomu powiększenia danej lokalizacji w Mapach Google.
Żądania MaxZoom
Dostęp do MaxZoomService
jest asynchroniczny, bo interfejs API Map Google wymaga wywoływania serwera zewnętrznego. Z tego powodu musisz przesłać metodę wywołania zwrotnego, która zostanie wykonana po zakończeniu żądania. Ta metoda wywołania zwrotnego powinna przetworzyć wynik.
Aby zainicjować żądanie do MaxZoomService
, wywołaj getMaxZoomAtLatLng()
, przekazując LatLng
lokalizacji i funkcji wywołania zwrotnego do wykonania po zakończeniu żądania.
Odpowiedzi MaxZoom
Gdy getMaxZoomAtLatLng()
wykonuje funkcję callback, przekazuje 2 parametry:
status
zawieraMaxZoomStatus
żądania.zoom
zawiera poziom powiększenia. Jeśli z jakiegoś powodu usługa przestanie działać, ta wartość nie będzie widoczna.
Kod status
może zwracać jedną z tych wartości:
OK
wskazuje, że usługa wykryła maksymalny poziom powiększenia zdjęć satelitarnych.ERROR
oznacza, że nie udało się przetworzyć żądania MaxZoom.
Poniższy przykład pokazuje mapę metropolii w Tokio. Kliknięcie w dowolnym miejscu na mapie wskazuje maksymalny poziom powiększenia w danej lokalizacji. (Poziomy powiększenia w Tokio różnią się między poziomami powiększenia 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;