Question

我想要做的是显示一个简单的谷歌地图（使用基本，卫星和混合作为选项），为其添加自定义标记，将其置于特定位置的中心，并且......使整个MAP褪色稍微一点，这样标记会更清晰。

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

我花了一整天的时间在stackoverflow上查看Q＆amp; A，浏览google API并尝试使用API v3找到一种在谷歌地图上添加透明叠加层的简单方法。

到目前为止，我能找到的最接近的是使用KML创建一个自定义图层并将其显示为控件，但由于我真的不知道KML是如何工作的，所以这是非常先进的，我觉得我必须花上几周的时间才能正常工作。

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

为了简单起见，我使用了smashinglabs.com中的gmap，但我可以通过更常规的Google地图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]}}]
});

请注意，为了保护隐私，我已删除了长/拉号码以及图标网址。）

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

可以找到smashinglabs gmap的文档here。

Answer 1

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

请参阅documentation about stylers here。

使用示例：

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

map.setOptions({
    styles: mapStyles
});

JSFiddle demo

希望这有帮助！

Answer 2

有趣的问题。

我很抱歉，但无法在地图上应用任何类型的不透明度，可以在视觉上突出显示您的标记。
使用KML是一个非常糟糕的选择。一旦你理解了它就会使用KML，但它不能满足你的需求。此外，它会使你的地图变慢。您可以使用world 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
我认为最适合您的问题是您可以通过示例代码创建简单的Google地图：现在，您在地图div上方再添加一个div，并为其设置不透明度/透明度。接下来，使用D3添加自定义标记。这是一个很棒的教程/示例代码： http://bl.ocks.org/mbostock/899711

如果您不熟悉D3，请不要担心，代码非常简单。（如果您需要任何帮助理解D3的代码，请询问）。您将使用SVG创建标记。将D3用于标记的好处是，即使您在地图上放置了1000多个标记，它也不会影响任何性能。

您也可以使用自定义样式地图。使用以下链接并检查＆＃34;轻盈＆＃34;并用它做修改。

此致 Suyash

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

2 个答案: