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

Question

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

Answer 1

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

您可以使用 -webkit-mask 使其看起来像 here 所述

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

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

对于两个 map ，'center_changed'(控制 map 居中)和'zoom_changed'(控制 map 缩放)应该做同样的事情

这里我设置了一个 example

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