Google Map API v3颜色自定义

Question

我正在尝试使用谷歌地图获得上面的图像。我通过在StyledMapType对象中将饱和度赋予-100并使用Circle对象在标记周围绘制半径来制作地图灰度。现在整个地图是灰度的，因为我无法在圆圈内设置另一个饱和度。有没有办法实现这个目标？

Answer 1

另一个想法是创建第二个地图，通过StyledMapType以另一种方式设置样式，使其绝对定位，并将其放在第一个灰度图的前面。

您可以使用-webkit-mask（如here

所述）使其看起来圆润

您还应该在地图之间同步事件，以便它们重合，即以相同位置为中心并始终具有相同的缩放级别。 您还需要创建某种阻止程序以避免递归调用

var block = false;
google.maps.event.addListener (thismap, 'center_changed', function(event) {
    if (block) return;
    block = true;
    othermap.setCenter(thisMap.getCenter());
    block=false;
});

两个地图的'center_changed'（控制地图居中）和'zoom_changed'（控制地图缩放）都应该这样做

我在这里设置了example

如果你需要以这种方式创建多个地图，你需要做更多工作才能使它们坚持必要的点

Answer 2

据我所知，无法直接在API中完成此操作。我不得不在过去实现类似的效果，我采用的方式是创建一个'甜甜圈'而不是一个圆圈。

有效的想法是创建一个大的形状，排除它的中心的圆形区域。这样，您可以将多边形上的不透明度设置得相当低，以突出显示“感兴趣区域”，在这种情况下为中心圆。

这可能是一个很好的起点：http://www.geocodezip.com/v3_polygon_example_donut.html

虽然显然在你的情况下你想要改变颜色。还要注意尺寸是固定的，所以除非你限制地图边界，否则用户将能够缩小到足以看到边缘（从而破坏幻觉），并且多边形向极点扭曲（讨厌的球形地球）。

希望这会有所帮助。