一切就绪!

着手开发前,请先阅读我们的开发者文档

激活 Google Maps JavaScript API

为帮助您起步,我们将引导您在 Google Developers Console 中先完成几项任务:

  1. 创建或选择项目
  2. 激活 Google Maps JavaScript API 及相关服务
  3. 创建相应密钥
继续

Maximum Zoom Imagery 服务

  1. Maximum Zoom Imagery
  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 级不等。)

var map;
var maxZoomService;
var 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, function(response) {
    if (response.status !== 'OK') {
      infoWindow.setContent('Error in MaxZoomService');
    } else {
      infoWindow.setContent(
          'The maximum zoom at this location is: ' + response.zoom);
    }
    infoWindow.setPosition(e.latLng);
    infoWindow.open(map);
  });
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
var map;
var maxZoomService;
var 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, function(response) {
    if (response.status !== 'OK') {
      infoWindow.setContent('Error in MaxZoomService');
    } else {
      infoWindow.setContent(
          'The maximum zoom at this location is: ' + response.zoom);
    }
    infoWindow.setPosition(e.latLng);
    infoWindow.open(map);
  });
}

查看示例 (maxzoom-simple.html)

发送以下问题的反馈:

此网页
Google Maps JavaScript API
Google Maps JavaScript API
需要帮助?请访问我们的支持页面