地面叠加层

请选择平台： Android iOS JavaScript

1. 简介
2. 添加地面叠加层
3. 移除地面叠加层

简介

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

如需了解其他叠加层类型，请参阅在地图上绘制。

添加地面叠加层

GroundOverlay 的构造函数会将图像的网址和 LatLngBounds 指定为参数。图像将仅渲染在地图上的指定边界内，并与地图的投影一致。

TypeScript

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

let historicalOverlay;

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 13,
      center: { lat: 40.74, lng: -74.18 },
    }
  );

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

  historicalOverlay = new google.maps.GroundOverlay(
    "https://storage.googleapis.com/geo-devrel-public-buckets/newark_nj_1922-661x516.jpeg",
    imageBounds
  );
  historicalOverlay.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

注意：请参阅 TypeScript 和 Google 地图的使用方法指南。

JavaScript

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

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 13,
    center: { lat: 40.74, lng: -74.18 },
  });
  const imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655,
  };

  historicalOverlay = new google.maps.GroundOverlay(
    "https://storage.googleapis.com/geo-devrel-public-buckets/newark_nj_1922-661x516.jpeg",
    imageBounds,
  );
  historicalOverlay.setMap(map);
}

window.initMap = initMap;
index.js

注意：所示 JavaScript 代码是从 TypeScript 代码段编译而来的。

查看示例

试用示例

JSFiddle.net Google Cloud Shell

移除地面叠加层

如要从地图中移除叠加层，请调用叠加层的 setMap() 方法并传递 null。请注意，调用此方法并不会删除叠加层，而会将其从地图中移除。如果您想删除叠加层，则应先将其从地图中移除，然后将叠加层本身设置为 null。

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

查看示例