שירות תמונות עם זום מקסימלי

  1. תמונות בזום מקסימלי
  2. בקשות MaxZoom
  3. תגובות של MaxZoom

סקירה כללית

‫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;
להצגת דוגמה