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 cấp độ thu phóng cho hình ảnh loại bản đồ. Ví dụ: hầu hết hình ảnh trong bản đồ lộ trình đều có từ cấp độ thu phóng 0 đến 18. Hình ảnh vệ tinh có nhiều biến thể 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ó ở mức thu phóng cao cho các vị trí xa xôi (như khu vực thưa thớt dân cư hoặc khu vực đại dương mở), 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í 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 lệnh gọi lại để 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 gọi lại để thực thi khi yêu cầu hoàn tất.

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 không thể xử lý yêu cầu MaxZoom.

Ví dụ sau đây cho thấy bản đồ của khu đô thị Tokyo. Khi nhấp vào vị trí bất kỳ trên bản đồ, bạn sẽ thấy mức thu phóng tối đa tại vị trí đó. (Mức thu phóng xung quanh Tokyo thường dao động từ mức thu phóng 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;
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
Xem ví dụ

Thử mẫu