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 MaxZoom
3. Phản hồi của MaxZoom

Tổng quan

API Google Maps cung cấp các ô bản đồ ở nhiều nơi mức thu phóng cho hình ảnh loại bản đồ. Lộ trình phổ biến nhất hình ảnh có sẵn từ mức thu phóng từ 0 đến 18, cho ví dụ: Hình ảnh vệ tinh thay đổi nhiều hơn hình ảnh 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ó sẵn tại mức thu phóng cao cho những địa điểm xa xôi — dân cư thưa thớt hoặc khu vực biển rộng lớn — bạn có thể muốn biết mức thu phóng cao nhất cho hình ảnh tại một vị trí cho trước trước. Đố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 ở vị trí cụ thể 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áy chủ bên ngoài. Để do đó, bạn cần truyền một 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ả.

Để tạo một yêu cầu tới MaxZoomService, gọi getMaxZoomAtLatLng(), truyền LatLng 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 lệnh gọi lại , nó sẽ trả về 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 đó 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 yêu cầu MaxZoom Không thể xử lý.

Ví dụ sau đây thể hiện bản đồ thành phố đô thị Tokyo. Nhấp vào bất kỳ nơi nào trên bản đồ cho 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 giữa mức thu phóng 18 và 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