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

Question

我一直试图在谷歌地图上绘制多个圆圈。一个半径很大的外圈覆盖所有其他圆圈和内部的多个圆圈。当两个较小的圆圈重叠时，我希望从交叉部分移除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);
}

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

Answer 1

检查此demo example link是否对您有帮助。

这有助于根据您在半径范围内的输入找到绘制圆圈。

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);