google-maps - 修复了透明图像覆盖整个谷歌地图 div

Question

我想实现这样的目标: Adding transparent overlay on google map

基本上，我需要将 map 顶部的图像固定在 map div 的顶部，但仍然能够拖动并使所有操作在 map 上可用。

我找到了一个解决方案，将 css3 hack 指针事件设置为 none。我的代码如下所示:

<div id="overlayMap"></div> //the div with a transparent png background that I set the pointer-events: none;
<div id="map"></div>

但这并不完美，因为它不能在所有 IE 版本以及 Opera 中工作: https://developer.mozilla.org/en-US/docs/CSS/pointer-events

我还发现了这个: Google Maps transparent image overlay

但这并不完全是我所需要的，因为我希望整个图像覆盖 map 。

有什么方法可以使用谷歌地图 API 来实现这一点吗？

Answer 1

你可以做类似的事情

function setOpacityLayerAcrossWholeMap(map) {
    new google.maps.Rectangle({
        fillColor: 'grey',
        fillOpacity: 0.65,
        map: map,
        bounds: new google.maps.LatLngBounds(
    new google.maps.LatLng(-90, -180),
    new google.maps.LatLng(90, 180))
    });
}

我自己做过并且有效，希望这是您正在寻找的!