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

  1. מרחק מקסימלי של תמונות מהתצוגה
  2. בקשות MaxZoom
  3. תגובות מקסימליות ב-Zoom

סקירה כללית

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

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

בקשות ל-MaxZoom

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

כדי להתחיל בקשה אל MaxZoomService, צריך להפעיל את getMaxZoomAtLatLng(), ומעבירים את LatLng של המיקום ופונקציית קריאה חוזרת שתבוצע לאחר השלמת הבקשה.

תגובות בזום מקסימלי

כאשר getMaxZoomAtLatLng() מבצע את פונקציית callback, הוא מעביר בחזרה שני פרמטרים:

  • 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;
index.ts

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

רוצה לנסות דוגמה?