谷歌地图v3围绕一个点绘制半径

发布于 2024-11-17 16:37:03 字数 3526 浏览 1 评论 0原文

我正在尝试创建一个地图，允许人们输入邮政编码和半径，并围绕该点绘制半径。 codeAddress 函数似乎可以工作，但 drawCircle 函数不起作用。也许有人可以查明错误，

请参阅下面的代码：

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


function initialize() {    
    geocoder = new google.maps.Geocoder();     
    var latlng = new google.maps.LatLng(-34.397, 150.644);    
    var myOptions = {       
        zoom: 8,      
        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 drawCircle() {
   var radius=document.getElementById("radius").value;
   geocoder.geocode( { 'address': address}, function(results, status){
   if (status==google.maps.GeocoderStatus.OK){
   var latlng=results[0].geometry.location;
   var latitude=latlng.lat();
   var longitude=latlng.lng();

    }   

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



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

 //Store points in array 
 var points = [];

 // 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 
   circleX = longitude + (cLng * Math.cos(theta));            
    // Calculate next Y point 
   circleY = latitude + (cLat * Math.sin(theta));
    // Add point to array 
    points.push(new GPoint(circleX, circleY));

 };

   //Add points to map
    var sColor=003F87;
    var stroke=.5;
  map.addOverlay(new GPolyline(points, sColor, stroke));

   }


</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() ">
       </div> 
   </body>
</html>

原文

I am trying to create a map which allows a person to enter a zip code and a radius and will draw a radius around that point. The codeAddress function seems to work, but the drawCircle function is not working. Perhaps someone can pinpoint the error

see code below:

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


function initialize() {    
    geocoder = new google.maps.Geocoder();     
    var latlng = new google.maps.LatLng(-34.397, 150.644);    
    var myOptions = {       
        zoom: 8,      
        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 drawCircle() {
   var radius=document.getElementById("radius").value;
   geocoder.geocode( { 'address': address}, function(results, status){
   if (status==google.maps.GeocoderStatus.OK){
   var latlng=results[0].geometry.location;
   var latitude=latlng.lat();
   var longitude=latlng.lng();

    }   

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



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

 //Store points in array 
 var points = [];

 // 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 
   circleX = longitude + (cLng * Math.cos(theta));            
    // Calculate next Y point 
   circleY = latitude + (cLat * Math.sin(theta));
    // Add point to array 
    points.push(new GPoint(circleX, circleY));

 };

   //Add points to map
    var sColor=003F87;
    var stroke=.5;
  map.addOverlay(new GPolyline(points, sColor, stroke));

   }


</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() ">
       </div> 
   </body>
</html>

分享到QQ

分享到微博