简介
叠加层是地图上与纬度/经度坐标绑定的对象,会随着您拖动或缩放地图而移动。如果您想要在地图上放置图像,可以使用 GroundOverlay
对象。
如需了解其他叠加层类型,请参阅在地图上绘制。
添加地面叠加层
GroundOverlay
的构造函数会将图像的网址和 LatLngBounds
指定为参数。图像将仅渲染在地图上的指定边界内,并与地图的投影一致。
// 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;
// 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;
试用示例
移除地面叠加层
如要从地图中移除叠加层,请调用叠加层的 setMap()
方法并传递 null
。请注意,调用此方法并不会删除叠加层,而会将其从地图中移除。如果您想删除叠加层,则应先将其从地图中移除,然后将叠加层本身设置为 null
。
function removeOverlay() { historicalOverlay.setMap(null); }