固定透明图像覆盖整个谷歌地图div答案

【问题标题】：fixed transparent image overlay whole google map div固定透明图像覆盖整个谷歌地图div
【发布时间】：2017-03-20 20:32:53
【问题描述】：

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

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

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

<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

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

有没有办法通过谷歌地图 API 实现这一点？

【问题讨论】：

标签： google-maps

【解决方案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))
    });
}

我自己做了并且工作，希望它是你正在寻找的！

【讨论】：

您也可以将strokeWeight 设置为0，以避免默认情况下在地图周围绘制粗黑线。
谢谢你的作品！但是对于图像，我仍然使用那个指针事件。不要认为它会允许在地图顶部添加透明图像。