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

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

最佳答案

另一个想法是创建第二张地图，通过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

如果您需要以这种方式创建多个地图，则需要做更多的工作以使它们固定在必要的位置

关于google-maps - Google Map API v3颜色自定义，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15547570/