谷歌地图v3：从地图上清除由多义线组成的圆圈

我想弄清楚如何清除地图上允许用户围绕某一点绘制半径的圆。我的clearMap功能似乎不起作用。见下面谷歌地图v3：从地图上清除由多义线组成的圆圈

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0px; padding: 0px } 
    #map_canvas { height: 100% } 
</style> 
<script type="text/javascript" 
src="http://maps.google.com/maps/api/js?sensor=false"> 
</script> 


</script> 
<script type= "text/javascript"> 

var geocoder; 
var map; 
var count=0; 
//Store points in array 
var points = []; 



function initialize() {  
    geocoder = new google.maps.Geocoder();  
    var latlng = new google.maps.LatLng(-34.397, 150.644);  
    var myOptions = {  
    zoom: 3,  
    center: latlng,  
    mapTypeId: google.maps.MapTypeId.ROADMAP  
    }  
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); 
}  
function codeAddress() {  
var address = document.getElementById("address").value; 
geocoder.geocode({ 'address': address}, function(results, status) {  
    if (status == google.maps.GeocoderStatus.OK) {   
    map.setCenter(results[0].geometry.location);   
    var marker = new google.maps.Marker({   
     map: map,    
     position: results[0].geometry.location 
     }); 

    } 
    else {   
    alert("Geocode was not successful for the following reason: " + status);  
    }  
    }); 
    } 
function plusCount(){ 
if (count==2){ 
count=0; 
} 
else{ 
count=count +1; 
} 
} 

function drawCircle() { 
var address=document.getElementById("address").value; 
var radius=document.getElementById("radius").value; 
var latitude=40; 
var longitude=0; 
geocoder.geocode({ 'address': address}, function(results, status){ 
if (status==google.maps.GeocoderStatus.OK){ 
latlng=(results[0].geometry.location); 
latitude=latlng.lat(); 
longitude=latlng.lng(); 
alert(latitude); 
alert(longitude); 
alert (radius); 
} 

else{ 
    alert("Geocode was not successful for the following reason: " + status); 
} 
}); 





//Degrees to radians 
    var d2r = Math.PI/180; 
    alert("calc d2r " + d2r); 
// Radians to degrees 
var r2d = 180/Math.PI; 
alert("calc r2d " + r2d); 
// Earth radius is 3,963 miles 
var cLat = (radius/3963) * r2d; 
alert("calc cLat " + cLat); 
    var cLng = cLat/Math.cos(latitude * d2r); 
    alert("calc cLng " + cLng); 




    // Calculate the points 
    // Work around 360 points on circle 
    for (var i=0; i < 360; i++) { 

    var theta = Math.PI * (i/16); 

    // Calculate next X point 
    circleY = longitude + (cLng * Math.cos(theta));    
    // Calculate next Y point 
    circleX = latitude + (cLat * Math.sin(theta)); 
    // Add point to array 
    points.push(new google.maps.LatLng(circleX, circleY)); 


}; 


    alert("completed loop"); 

    var colors=["#CD0000","#2E6444","#003F87" ]; 

    var Polyline_Path = new google.maps.Polyline({ 
    path: points, 
    strokeColor: colors[count], 
    // color of the outline of the polyline 
    strokeOpacity: 1, 
    // between 0.0 and 1.0 
    strokeWeight: 1, 
    // The stroke width in pixels 
    fillColor: colors[count], 
    fillOpacity: .5 
    }); 
    Polyline_Path.setMap(map); 


} 

function clearMap(){ 
if(points){ 
for(i in points){ 
points[i].setMap(null); 
} 
points.length=0; 

    }} 


</script> 
</head> 
    <body onload="initialize()"> 
     <div id="map_canvas" style="width:500px; height:460px; 
     -moz-outline-radius:20px; -moz-box-sizing:padding-box; -moz-outline- style:solid ;-moz-outline-color:#9FB6CD; 
    - moz-outline-width:10px;"></div> 
     <div>  
     Zip Code: <input id="address" type="textbox" value="">  
     Radius:<input id="radius" type="textbox" value=""> 
     <input type="button" value="Find" onclick="codeAddress() "> 
     <input type="button" value="Draw Radius" onclick= "drawCircle() ; plusCount()"> 
     <input type="button" value="Reset" onclick= "clearMap()"> 
    </div> 
</body>

来源

2011-06-30 trs

代码如果您使用google.maps.Circle创建自己的圈子。然后你可以创建他们tehm添加到这样

var options = { 
    strokeColor: #CD0000, 
    strokeOpacity: 0.8, 
    strokeWeight: 2, 
    fillColor: #2E6444, 
    fillOpacity: 0.5, 
    map: map, 
    center: latlng, 
    radius: parseInt(radius) 
}; 

circles[circles.length] = new google.maps.Circle(options);

一个数组，那么你清晰的地图功能将

function clearMap(){ 
    if (circles){ 
     for (var idx=0;idx<circles.length;idx++){ 
      circles[idx].setMap(null); 
     } 
    } 
}

来源

2011-07-01 17:02:47 richie

谷歌地图v3：从地图上清除由多义线组成的圆圈

回答

相关问题