在Google Maps v3中淡化地图/添加透明图层

Question

在Google Maps v3中淡化地图/添加透明图层

3

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

这最后一点证明是相当困难的任务，因为我需要以某种方式淡化地图，但保持标记和地图控件在地图顶部，所以拖动地图、缩放和点击标记的正常功能仍然可以工作。如果这是简单HTML，我会使用z-index值来控制它全部，但看起来标记嵌入地图瓦片内使用画布，所以我真的绑定使用google 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的文档。

- user3392015

2个回答

0

有趣的问题。

1. 抱歉，无法对地图本身应用任何透明度来突出显示您的标记。 2. 使用KML是一个严重的糟糕选项。一旦你理解了它，使用KML非常简单，但它不能满足你的情况。此外，它会使你的地图变慢。您可以尝试使用世界KML文件并使用以下教程：KML文件 https://www.google.com/fusiontables/DataSource?docid=1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk#rows:id=1 和 https://www.google.com/fusiontables/data?docid=1zn8cjdD6qlAFI7ALMEnwn89g50weLi1D-bAGSZw#rows:id=1 示例代码： https://developers.google.com/maps/documentation/javascript/examples/layer-kml 3. 我认为最适合您的问题的方法是使用示例代码创建简单的Google地图: 现在，您在地图div上方添加另一个div，并将其设置为不透明/透明。接下来，您可以使用D3添加自定义标记。这是一个很棒的教程/示例代码： http://bl.ocks.org/mbostock/899711

如果您不熟悉D3，请不要担心，代码非常简单。（如果您需要帮助理解D3的代码，请提问）。您将使用SVG创建标记。

使用D3制作标记的好处是，即使在地图上放置了1000多个标记，也不会影响任何性能。

您还可以使用自定义样式地图。使用以下链接并检查“亮度”，进行修改。

此致， Suyash

- Suyash Dixit

这听起来非常有前途。我会尝试使用D3，看看它是否能解决我的问题 :) - user3392015

我在D3文档中遇到了一些问题，主要是关于smashinglabs gmap提供的功能（自适应地图和png标记）。尽管这个想法看起来很有前途，但我认为我可能会放弃它。 - user3392015

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MrUpsidown · Accepted Answer

您所需要的功能可以使用 gamma 或 lightness 样式器来实现。这不是透明度效果，意味着它不会显示地图后面的任何元素，但可以实现您在问题中提到的淡出效果。

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

示例用法：

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

map.setOptions({
    styles: mapStyles
});

JSFiddle演示

希望这可以帮到你！