סקירה כללית
Google Maps API מספק משבצות מפה ב רמות זום שונות לתמונות של סוגי מפות. לדוגמה, רוב התמונות של מפת הדרכים זמינות ברמות זום מ-0 עד 18. צילומי לוויין משתנים יותר, כי הם לא נוצרים, אלא מצולמים ישירות.
צילומי לוויין לא תמיד זמינים ברמות זום גבוהות במיקומים מרוחקים, כמו אזורים עם אוכלוסייה דלילה או אזורים באוקיינוס הפתוח. לכן, יכול להיות שתרצו לדעת מראש מהי רמת הזום הגבוהה ביותר של התמונות במיקום מסוים. האובייקט MaxZoomService מספק ממשק פשוט לזיהוי רמת הזום המקסימלית במיקום נתון שבו יש למפות Google צילומי לוויין.
בקשות MaxZoom
הגישה ל-MaxZoomService היא אסינכרונית, כי Google Maps API צריך לשלוח קריאה לשרת חיצוני. לכן צריך להעביר שיטת קריאה חוזרת (callback) כדי להפעיל אותה בסיום הבקשה. שיטת הקריאה החוזרת הזו אמורה לעבד את התוצאה.
כדי לשלוח בקשה אל MaxZoomService, מפעילים את getMaxZoomAtLatLng() ומעבירים את ה-LatLng של המיקום ופונקציית קריאה חוזרת (callback) שתופעל בסיום הבקשה.
תשובות של 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;