图像最大缩放级别服务

  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;

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

试用示例