谷歌地图API V3颜色自定义

Question

我正在尝试使用谷歌地图实现像上面的图片一样的地图。我通过在StyledMapType对象中给饱和度设置为-100使地图变成灰度，并使用Circle对象在标记周围绘制了一个半径。现在整个地图变成了灰色，因为我无法在圆内设置另一个饱和度水平。有没有办法实现这一点？

- Ajmal VH

---

我不相信使用Maps API有任何直接的方法来完成这个任务。你可以查看http://googlemapsmania.blogspot.com/2011/10/create-cool-mask-effect-on-google-maps.html，在地图上叠加一个遮罩。 - Bryan Weaver

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'（控制地图缩放），两个地图都要这么做

在这里我设置了一个例子

如果你需要以此方式创建多个地图，那么你需要更多的工作来使它们保持在必要的点上

- paulitto

---

公平地说，我认为这会有一些性能损失，但它运行非常顺畅，似乎正是所需的解决方案。但要注意地图瓦片使用限制，这个解决方案的使用量将是原来的两倍。 - ChrisSwires

Answer 2

据我所知，在API内部没有直接实现此功能的方法。我曾经在过去实现过类似的效果，我的做法是创建一个“甜甜圈”而不是一个圆形。

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

这可能是一个很好的起点: http://www.geocodezip.com/v3_polygon_example_donut.html 当然，在你的情况下，你要改变颜色。还要注意，大小是固定的，除非你限制地图边界，否则用户将能够缩小到足以看到边缘（从而破坏幻觉），而多边形会朝极点扭曲（讨厌的球形地球）。

希望这可以帮助到您。

- ChrisSwires