图像最大缩放级别服务

  1. 图像最大缩放级别
  2. MaxZoom 请求
  3. MaxZoom 响应

概览

Google Maps API 为地图类型图像提供了多种不同缩放级别的地图图块。例如，大多数路线图图像支持从 0 到 18 级的缩放级别。由于卫星图像不是生成的，而是直接拍摄得到的，因此这种图像的缩放级别差异更大。

在偏远位置（人口稀少的地区或公海区域），有时候并不能得到高缩放级别的卫星图像，因此您也许想预先知道某个指定位置的图像最高缩放级别。MaxZoomService 对象提供了一个简单的接口，可供您查看 Google 地图拥有其卫星图像的某个指定位置的最大缩放级别。

MaxZoom 请求

由于 Google Maps API 需要调用外部服务器，因此对 MaxZoomService 的访问是异步进行的。因此，您需要传递一个回调方法，以便在请求完成时执行。该回调方法应该对结果进行处理。

若要向 MaxZoomService 发起请求，请调用 getMaxZoomAtLatLng()，并传入该位置的 LatLng 以及在请求完成后执行的回调函数。

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
查看示例

试用示例