在谷歌地图 v3 中淡化地图/添加透明层

Question

我想要做的是显示一个简单的谷歌地图（基本、卫星和混合作为选项），为其添加一个自定义标记，使其以特定位置为中心，并且 .. 使整个 MAP 淡出一点所以标记会更清晰。

最后一点被证明是一项相当困难的任务，因为我需要以某种方式淡化地图，但在地图顶部保留标记和地图控件，因此拖动地图、缩放和单击标记的正常功能仍然可以工作。如果这是简单的 HTML，我会使用 z-index 值来控制它，但看起来标记是使用画布嵌入在地图图块中的，所以我真的必须使用谷歌 API 来做到这一点。

我花了一整天时间在 stackoverflow 上浏览问答，浏览谷歌 API，并试图找到一些简单的方法来使用 API v3 在谷歌地图上添加透明覆盖。

到目前为止，我能找到的最接近的方法是使用 KML 创建一个自定义图层并将其显示为控件，但由于我真的不了解 KML 的工作原理，所以这真的很先进，我觉得我必须花费数周才能使这项工作正常进行。

真的没有简单的方法可以在谷歌地图中创建这种透明效果吗？

为简单起见，我使用来自 smashinglabs.com 的 gmap，但我可以通过更通用的谷歌地图 API 调用轻松切换它。这是我目前使用的 javascript 代码：

$("#bmap").gMap({
  latitude: 'fit',
  longitude: 'fit',
  zoom: 'fit',
  maptype:google.maps.MapTypeId.HYBRID,
  controls:[{pos:google.maps.ControlPosition.TOP_LEFT,div:$("#bmapoverlay")}],
  markers: [extraMarker,{ latitude:XX,longitude:XX,html:'',
  icon:{image:'*URL*',iconsize:[56,90],iconanchor:[28,90]}}]
});

请注意，为了隐私，我删除了长/纬度数字以及图标 URL :)

添加 DIV bmapoverlay 根本不起作用，我会考虑将其全部删除。

可以在此处找到 smashinglabs gmap 的文档。

Answer 1

该gamma或lightness造型应适用于你的要求。这不是透明效果，这意味着它不允许看到地图后面的任何元素，但它应该实现您在问题中提到的淡出效果。

请参阅此处有关样式器的文档。

用法示例：

var mapStyles = [{
    "stylers": [{
        "gamma": 6
    }]
}];

map.setOptions({
    styles: mapStyles
});

JSFiddle demo

希望这可以帮助！