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

1. Hình ảnh thu phóng tối đa
2. Yêu cầu đối với MaxZoom
3. Phản hồi của 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 lộ trình đều có ở các mức thu phóng từ 0 đến 18. Hình ảnh vệ tinh thay đổi rộng hơn vì hình ảnh này không được tạo ra 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ó mức thu phóng cao cho các địa điểm xa, chẳng hạn như khu vực có dân cư thưa thớt hoặc khu vực đại dương, nên bạn nên biết trước mức thu phóng cao nhất cho hình ảnh ở một vị trí cụ thể. Đố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 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 phương thức callback để thực thi sau 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 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 sau 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ẽ trả về 2 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 khu đô thị Tokyo. Nhấp vào vị trí bất kỳ trên bản đồ sẽ cho biết mức thu phóng tối đa tại vị trí đó. (Mức thu phóng ở Tokyo thường thay đổi trong khoảng từ mức thu phóng 18 đến 21.)

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

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