最大缩放图像服务

使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。
  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;
查看示例

试用示例