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

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

סקירה כללית

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

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

בקשות MaxZoom

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

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

ניסיון של דוגמה