Dịch vụ hình ảnh có thể thu phóng tối đa

  1. Hình ảnh thu phóng tối đa
  2. Yêu cầu MaxZoom
  3. Phản hồi MaxZoom

Tổng quan

API Google Maps cung cấp các ô bản đồ ở nhiều mức thu phóng cho hình ảnh loại bản đồ. Ví dụ: hầu hết hình ảnh trên bản đồ đường đều có sẵn từ mức thu phóng 0 đến 18. Hình ảnh vệ tinh có sự khác biệt lớn hơn vì hình ảnh này không được tạo mà được chụp trực tiếp.

Vì hình ảnh vệ tinh không phải lúc nào cũng có sẵn ở mức thu phóng cao cho các vị trí từ xa (khu vực thưa dân hoặc khu vực đại dương mở), nên bạn có thể muốn biết trước mức thu phóng cao nhất cho hình ảnh tại một vị trí nhất định. Đối tượng MaxZoomService cung cấp một giao diện đơn giản để khám phá mức thu phóng tối đa tại một vị trí nhất định mà Google Maps có hình ảnh vệ tinh.

Yêu cầu MaxZoom

Việc truy cập vào MaxZoomService là không đồng bộ, vì API Google Maps cần thực hiện lệnh gọi đến một máy chủ bên ngoài. Vì lý do đó, bạn cần truyền một phương thức gọi lại để thực thi khi hoàn tất yêu cầu. Phương thức gọi lại này sẽ xử lý kết quả.

Để bắt đầu một yêu cầu đến MaxZoomService, hãy gọi getMaxZoomAtLatLng(), truyền LatLng của vị trí và một hàm callback để thực thi khi hoàn tất yêu cầu.

Phản hồi MaxZoom

Khi getMaxZoomAtLatLng() thực thi hàm callback, hàm này sẽ truyền lại hai tham số:

  • status chứa MaxZoomStatus của yêu cầu.
  • zoom chứa mức thu phóng. Nếu vì lý do nào đó mà dịch vụ không thành công, thì giá trị này sẽ không xuất hiện.

Mã status có thể trả về một trong các giá trị sau:

  • OK cho biết dịch vụ đã tìm thấy mức thu phóng tối đa cho hình ảnh vệ tinh.
  • ERROR cho biết rằng không thể xử lý yêu cầu MaxZoom.

Ví dụ sau đây cho thấy bản đồ của thủ đô Tokyo. Nhấp vào vị trí bất kỳ trên bản đồ để biết mức thu phóng tối đa tại vị trí đó. (Mức thu phóng xung quanh Tokyo thường thay đổi trong khoảng từ 18 đến 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;
Xem ví dụ