Javascript 在谷歌地图上绘制多个重叠圆

我一直试图在谷歌地图上画多个圆。一个半径很大的外圆覆盖了所有其他圆和其中的多个圆。当两个较小的圆重叠时，我希望从相交部分删除alpha。这是我创建的屏幕截图

代码如下：

var bounds = null;
var google_maps = null;
initialize();

function drawCircle(point, radius, dir) { 
    var d2r = Math.PI / 180;   // degrees to radians 
    var r2d = 180 / Math.PI;   // radians to degrees 
    var earthsradius = 3963; // 3963 is the radius of the earth in miles
    var points = 32; 

    // find the raidus in lat/lon 
    var rlat = (radius / earthsradius) * r2d; 
    var rlng = rlat / Math.cos(point.lat() * d2r); 

    var extp = new Array(); 
    if (dir==1) {var start=0;var end=points+1} // one extra here makes sure we connect the
    else{var start=points+1;var end=0}
    for (var i=start; (dir==1 ? i < end : i > end); i=i+dir)  
    {
        var theta = Math.PI * (i / (points/2)); 
        ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta) 
        ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta) 
        extp.push(new google.maps.LatLng(ex, ey)); 
        bounds.extend(extp[extp.length-1]);
    }
    return extp;
}

function initialize()
{
    var map_options = {
        center: new google.maps.LatLng(17.385044,78.486671),
        zoom: 15,
        minZoom:9,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    google_map = new google.maps.Map(document.getElementById("map_canvas"), map_options);
    google_map.setOptions({styles: $scope.opt.styles});

    bounds = new google.maps.LatLngBounds();
    var myCircles = new google.maps.Polygon({
        paths: [drawCircle(new google.maps.LatLng(17.385044,78.486671), 100, 1),
            drawCircle(new google.maps.LatLng(17.385044,78.486671), 0.5, -1),
            drawCircle(new google.maps.LatLng(17.383044,78.486671), 0.5, -1)],
        strokeColor: "#bababa",
        strokeOpacity: 0.4,
        fillColor: "#bababa",
        fillOpacity: 0.35
    });
    myCircles.setMap(google_map);
}

var-bounds=null；
var google_maps=null；
初始化（）；
函数drawCircle（点、半径、方向）{
var d2r=Math.PI/180；//度到弧度
var r2d=180/Math.PI；//弧度到度
var earthsradius=3963；//3963是地球的半径，以英里为单位
var点=32；
//在lat/lon找到袭击者
var rlat=（半径/地球半径）*r2d；
var rlng=rlat/Math.cos（point.lat（）*d2r）；
var extp=新数组（）；
如果（dir==1）{var start=0；var end=points+1}//这里有一个额外的值确保我们连接
else{var start=points+1；var end=0}
对于（变量i=start；（dir==1？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；
}
函数初始化（）
{
变量映射_选项={
中心：新google.maps.LatLng（17.385044,78.486671），
缩放：15，
minZoom:9，
ZoomControl选项：{
样式：google.maps.ZoomControlStyle.SMALL
},
mapTypeId:google.maps.mapTypeId.ROADMAP
};
google\u map=new google.maps.map（document.getElementById（“map\u画布”），map\u选项）；
google_map.setOptions（{styles:$scope.opt.styles}）；
bounds=新的google.maps.LatLngBounds（）；
var myCircles=new google.maps.Polygon({
路径：[drawCircle（新的google.maps.LatLng（17.385044,78.486671），100,1），
drawCircle（新google.maps.LatLng（17.385044,78.486671），0.5，-1），
drawCircle（新google.maps.LatLng（17.383044,78.486671），0.5，-1）]，
strokeColor:#巴巴巴“，
笔划不透明度：0.4，
fillColor:#巴巴巴“，
不透明度：0.35
});
设置地图（谷歌地图）；
}

两个圆的相交部分也必须是透明的。有可能这样做吗？我在互联网上找不到任何东西。

检查这是否对您有帮助

这有助于根据半径中的输入找到并绘制一个圆

function initialize() {

var gm = google.maps,
    start_point = new gm.LatLng(17.385044,78.486671),
    map = new gm.Map(document.getElementById('map_canvas'), {
        mapTypeId: gm.MapTypeId.ROADMAP,
        zoom: 16,
        center: start_point
    }),
    marker = new gm.Marker({
        position: start_point,
        map: map,
         //Colors available (marker.png is red):
         //black, brown, green, grey, orange, purple, white & yellow
        icon: 'http://maps.google.com/mapfiles/marker_green.png'
    });
var radius = 500;
var radi= radius/2;
var radi1= radius/4;
var circleOptions = {
        strokeColor: '#FFFF00',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FFFF00',
        fillOpacity: 0.35,
        map: map,
        center: start_point,
        radius: radius
    };

  var circleOptions1 = {
        strokeColor: '#F00FF0',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#F00FF0',
        fillOpacity: 0.35,
        map: map,
        center: start_point,
        radius: radi
    };

  var circleOptions2 = {
        strokeColor: '#F00FF0',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#F00FF0',
        fillOpacity: 0.35,
        map: map,
        center: start_point,
        radius: radi1
    };
    // Add the circle to the map.
    var markerCircle = new google.maps.Circle(circleOptions);
    var markerCircle1 = new google.maps.Circle(circleOptions1);
      var markerCircle2 = new google.maps.Circle(circleOptions2);

}


google.maps.event.addDomListener(window, 'load', initialize);