Google지도에 여러 개의 겹치는 원을 그리기

Question

Google지도에 여러 개의 원을 그리는 중입니다. 다른 모든 원과이 안에있는 여러 개의 원을 모두 커버하는 큰 반경을 가진 외부 원입니다. 더 작은 원 중 두 개가 겹치면 교차 부분에서 알파를 제거하십시오.이 스크린 샷을 만들었습니다. ?

가

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

두 원의 교차 부분도 있어야합니다 transparent.Is이 일 가능성이 내가 인터넷에 아무것도가 찾을 수 없습니다 : 여기

는 코드입니다.

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