Google Map API v3颜色自定义

问题描述

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

解决方案

另一个想法是创建第二个地图，以另一种方式通过StyledMapType，make它绝对定位，并把它放在第一个灰度地图前面。

你可以使用-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'（控制地图缩放），为这两个地图

这里我设置了一个

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

I am trying achieve a map like the above image using google map. I made the map grayscale by giving saturation to -100 in StyledMapType object and drawn a radius around the marker using Circle object. Now the whole map is grayscle as i cannot set another saturation level inside the circle. Is there any way to achieve this ?

解决方案

Another idea is to create second map, style it in another way via StyledMapType, make it absolutely positioned, and put it in front of first grayscaled map.

You can make it look round using -webkit-mask like described here

You should also synchronize events between maps, so that they would coincide, i.e. centered to the same position and always have same zoom level.You need also to create some kind of blocker to avoid recursive calls

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

The same should be done for 'center_changed' (to control maps centering) and for 'zoom_changed' (control maps zoom), for both maps

Here I've set up an example

If you will need to create more than one map that way, you'll need to do more work to make them stick to necessary points

这篇关于Google Map API v3颜色自定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！