google-maps - Google Map API v3 颜色自定义

Question

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

Answer 1

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

您可以使用 -webkit-mask 使其看起来像这里描述的那样

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

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'（控制地图缩放）应该做同样的事情

这里我设置了一个例子

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

Answer 2

据我所知，没有办法直接在 API 中完成此操作。过去我不得不实现类似的效果，而我的做法是创建一个“甜甜圈”而不是一个圆圈。

实际上，这个想法是创建一个不包括其中心的圆形区域的大形状。通过这种方式，您可以将多边形上的不透明度设置得相当低，以便在本例中突出显示“感兴趣区域”为中心圆。

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

虽然显然在你的情况下你会想要改变颜色。另请注意，大小是固定的，因此除非您限制地图边界，否则用户将能够缩小到足够远以看到边缘（从而破坏错觉），并且多边形会向两极扭曲（讨厌的球形地球）。

希望这可以帮助。