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

Question

我想做的是显示一个简单的谷歌地图(有基本的、卫星的和混合的作为选项)，向它添加一个自定义标记，让它以特定位置为中心，并且..让整个 map 褪色稍微外一点，这样标记会更清晰。

这最后一点被证明是一项相当困难的任务，因为我需要以某种方式淡化 map ，但要在 map 顶部保留标记和 map 控件，因此拖动 map 、缩放和单击标记的正常功能将还在工作。如果这是简单的 HTML，我会使用 z-index 值来控制它，但看起来标记是使用 Canvas 嵌入到 map 图 block 中的，所以我真的不得不使用 google API 来执行此操作。

我花了一整天的时间查看 stackoverflow 上的问答，浏览 google API 并尝试找到一些使用 API v3 在 google map 上添加透明叠加层的简单方法。

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

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

为简单起见，我使用的是来自 smashinglabs.com 的 gmap，但我可以使用更通用的 google maps 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 的文档 here .

Answer 1

gamma 或 lightness 样式器应该可以满足您的要求。这不是透明效果，这意味着它不允许看到 map 后面的任何元素，但它应该实现您在问题。

参见 documentation about stylers here .

示例用法:

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

map.setOptions({
    styles: mapStyles
});

JSFiddle demo

希望这对您有所帮助!