Google maps api 3 圆圈填充颜色

我想知道是否有机会在圆圈之间填充不同的颜色，因此在下面的代码中，我使用了城市代码，但也是出于我的目的。无论如何，我从同一个中心点有4个圆圈，4，6，8，11英里，它们用strokecolor标记。但是我想知道4-6、6-8、8-11英里之间是否可以有不同的填充

var distancemap = {
        fourmiles: {
          center: {lat: 53.3555367, lng: -6.2748774},
          distance: 6437.38
        },
        sixmiles: {
          center: {lat: 53.3555367, lng: -6.2748774},
          distance: 9656.064
        },
        eightmiles: {
          center: {lat: 53.3555367, lng: -6.2748774},
          distance: 12874.8
        },
        elevenmiles: {
          center: {lat: 53.3555367, lng: -6.2748774},
          distance: 17702.8
        }
      };

      function initAutocomplete() {
        // Create the map.
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 10,
          center: {lat: 53.3555367, lng: -6.2748774},
          mapTypeId: 'roadmap'
        });

        // Construct the circle for each value in distancemap.
        // Note: We scale the area of the circle based on the distance.
        for (var city in distancemap) {
          // Add the circle for this city to the map.
          var cityCircle = new google.maps.Circle({
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#000000',
            fillOpacity: 0.005,
            map: map,
            center: distancemap[city].center,
            radius: Math.abs(distancemap[city].distance) * 1
          });

你不能在

google.maps.Circle

上打“洞”。但是你可以制作圆形的

google.maps.Polygons

，上面有洞。见这一相关问题：

代码片段：

函数initAutocomplete（）{
//创建地图。
var map=new google.maps.map（document.getElementById（'map'）{
缩放：10，
中心：{
拉脱维亚：53.3555367，
液化天然气：-6.2748774
},
mapTypeId:“路线图”
});
对于（var i=0；iend）；i=i+dir）{
varθ=数学PI*（i/（点/2））；
ey=点.lng（）+（rlng*Math.cos（θ））；//中心a+半径x*cos（θ）
ex=point.lat（）+（rlat*Math.sin（θ））；//中心b+半径y*sin（θ）
extp.push（新的google.maps.LatLng（ex，ey））；
//extend（extp[extp.length-1]）；
}
返回extp；
}
变量距离映射={
四英里：{
中心：{
拉脱维亚：53.3555367，
液化天然气：-6.2748774
},
距离：6437.38，
颜色：“FF0000”
},
六英里：{
中心：{
拉脱维亚：53.3555367，
液化天然气：-6.2748774
},
距离：9656.064，
颜色：“00FF00”
},
八英里：{
中心：{
拉脱维亚：53.3555367，
液化天然气：-6.2748774
},
距离：12874.8，
颜色：“0000FF”
},
埃列文迈尔斯：{
中心：{
拉脱维亚：53.3555367，
液化天然气：-6.2748774
},
距离：17702.8，
颜色：“FFFF00”
}
};
变量距离数组=[
距离地图，四英里，
距离地图。六英里，
距离地图。八英里，
距离地图
]

html，
身体，
#地图{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}

// Add the circle for this city to the map.
var paths;
if (i==0) {
  // innermost circle, no "hole"
  paths = [drawCircle(distanceArray[0].center, Math.abs(distanceArray[0].distance) * 1, 1)];
} else {
  // every other circle has a "hole" the size of the inner/next smallest circle
  paths = [
    drawCircle(distanceArray[i-1].center, Math.abs(distanceArray[i-1].distance) * 1, -1),
    drawCircle(distanceArray[i].center, Math.abs(distanceArray[i].distance) * 1, 1)
  ];
}
var cityCircle = new google.maps.Polygon({
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: distanceArray[i].color,
  fillOpacity: 0.5,
  map: map,
  paths: paths
});