在Google Maps JavaScript API中绘制甜甜圈（突出显示内圈的外侧和外圈的内侧）

Question

如何使用Google Maps JavaScript API绘制甜甜圈？ 用于突出显示内圈的外部和外圈的内部。

我的想法是将内圈放在外圈之前。 问题是在设置内圆的fillOpacity时无法加载。

var citymap = {};
citymap['innerCircle'] = {
      center: amsterdam,
      radius: 3146.2245383489244,
      //opacity = 0.0 // bug here
    };
citymap['outerCircle'] = {
      center: amsterdam,
      radius: 7021.113634532091,
      opacity: 0.35};    
for (var city in citymap) {
var populationOptions = {
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',                              
  fillOpacity: citymap[city].opacity,    
  map: map,
  center: citymap[city].center,
  radius: citymap[city].radius
};

Answer 1

通常在Google地图中，您可以绘制带孔的多边形，第一个多边形是外部形状，另一个是内部形状 请参阅此stackoverflow以获取示例ring example