Is there a method/config property in the Google Maps v3 JS API to disable/workaround the alpha combining of overlapping circles? I'm currently working on a project that can end up drawing many circles on a map, with some areas being the intersection of >10 circles. Even with a very low opacity, this can soon make the map unreadable in those intersecting areas. Any suggestions on how to keep the intersections the same opacity as any individual circle would be much appreciated - apparently this was the default behaviour in v2 of the API (example screenshot: http://img23.imageshack.us/i/screenshot20110504at655.png/ )
Google Maps v3 JS API中是否有方法/配置属性来禁用/解决重叠圆圈的alpha组合？我目前正在开发一个项目，最终可以在地图上绘制多个圆圈，其中一些区域是> 10个圆圈的交叉点。即使具有非常低的不透明度，这很快就会使这些交叉区域中的地图不可读。关于如何保持交叉点与任何单个圆圈相同的不透明度的任何建议都将非常感激 - 显然这是API的v2中的默认行为（示例屏幕截图：http：//img23.imageshack.us/i/screenshot20110504at655.png /）
3 个解决方案
#1
1
You need to combine the paths, as arrays of arrays, into a single polygon. Example code here, and view the result here.
您需要将路径（作为数组的数组）组合到单个多边形中。此处的示例代码，并在此处查看结果。
#2
0
So 2 years later, I had the same issue. This solution is a bit of a hack.
所以2年后，我遇到了同样的问题。这个解决方案有点像黑客。
Set all the circles' opacity to 1 in the javascript. Then add this css:
在javascript中将所有圆圈的不透明度设置为1。然后添加这个css：
#map-canvas > div:first-of-type > div:first-of-type > div:first-of-type > div:first-of-type > div:first-of-type > div:first-of-type > div:first-of-type {
opacity:0.3
}
If Google change the location of the circle layer, then this will break.
PS. I'm using v3 of the maps api.
如果Google更改了圆圈图层的位置，那么这将会中断。 PS。我正在使用地图api的v3。
#3
0
based on Daryls answer you must put this into the style portion of the html header:
根据Daryls的回答你必须把它放到html标题的样式部分：
.gm-style > div:nth-child(1) > div:nth-child(1) > div:nth-child(2){
opacity: 0.1;
}
This is working for me, as of july 2018
截至2018年7月，这对我有用
#1
1
You need to combine the paths, as arrays of arrays, into a single polygon. Example code here, and view the result here.
您需要将路径（作为数组的数组）组合到单个多边形中。此处的示例代码，并在此处查看结果。
#2
0
So 2 years later, I had the same issue. This solution is a bit of a hack.
所以2年后，我遇到了同样的问题。这个解决方案有点像黑客。
Set all the circles' opacity to 1 in the javascript. Then add this css:
在javascript中将所有圆圈的不透明度设置为1。然后添加这个css：
#map-canvas > div:first-of-type > div:first-of-type > div:first-of-type > div:first-of-type > div:first-of-type > div:first-of-type > div:first-of-type {
opacity:0.3
}
If Google change the location of the circle layer, then this will break.
PS. I'm using v3 of the maps api.
如果Google更改了圆圈图层的位置，那么这将会中断。 PS。我正在使用地图api的v3。
#3
0
based on Daryls answer you must put this into the style portion of the html header:
根据Daryls的回答你必须把它放到html标题的样式部分：
.gm-style > div:nth-child(1) > div:nth-child(1) > div:nth-child(2){
opacity: 0.1;
}
This is working for me, as of july 2018
截至2018年7月，这对我有用