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

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

סקירה כללית

ה-API של מפות Google מספק קטעי מפה רמות הזום בתמונות של סוגי מפה. מפת הדרכים תמונות זמינות מרמות הזום 0 עד 18, עבור לדוגמה. צילומי הלוויין משתנים במידה רבה יותר, שהן לא נוצרות, אלא מצולמות ישירות.

מכיוון שצילומי לוויין לא תמיד זמינים רמות זום גבוהות עבור מיקומים מרוחקים – מאוכלסות במידה מועטה או אזורי אוקיינוס פתוחים — ייתכן לדעת את רמת הזום הגבוהה ביותר עבור תמונות במיקום נתון מראש. האובייקט MaxZoomService מספק ממשק פשוט לגילוי רמת הזום המקסימלית נתון של מיקום שעבורו יש במפות Google צילומי לוויין.

בקשות ל-MaxZoom

הגישה אל MaxZoomService היא אסינכרונית, מכיוון ש- Google Maps API צריך לבצע קריאה לשרת חיצוני. עבור לכן, צריך להעביר שיטת קריאה חוזרת עם השלמת הבקשה. שיטת הקריאה החוזרת הזו צריכה לעבד את התוצאה.

כדי לשלוח בקשה אל 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;
להצגת דוגמה

כדאי לנסות דוגמה