一切就绪!

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

激活 Google Maps JavaScript API

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

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

底面叠层

  1. 简介
  2. 添加底面叠层
  3. 删除底面叠层

简介

叠加层是地图上与纬度/经度坐标绑定的对象,会随您拖动或缩放地图而移动。如果您要将某图像放置到地图上,您可以使用 GroundOverlay 对象。

有关其他叠层类型的信息,请参阅在地图上绘制

添加底面叠层

GroundOverlay 的构造函数可指定图像的 URL 并以参数形式指定该图像的 LatLngBounds。该图像将在地图上的给定边界内呈现,并与地图的投影一致。

// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.

var historicalOverlay;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 40.740, lng: -74.18}
  });

  var imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655
  };

  historicalOverlay = new google.maps.GroundOverlay(
      'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
      imageBounds);
  historicalOverlay.setMap(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>
// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.

var historicalOverlay;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 40.740, lng: -74.18}
  });

  var imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655
  };

  historicalOverlay = new google.maps.GroundOverlay(
      'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
      imageBounds);
  historicalOverlay.setMap(map);
}

查看示例 (groundoverlay-simple.html)

删除底面叠层

要从地图上删除一个叠层,请调用该叠层的 setMap() 方法,并向其传递 null。请注意,调用此方法并不会删除叠层。它只是从地图上移除叠层。如果您想要删除叠层,则应将其从地图中移除,然后将叠层本身设置为 null

function removeOverlay() {
  historicalOverlay.setMap(null);
}

查看示例 (overlay-remove.html)

发送以下问题的反馈:

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