谷歌地图V3折线圆绘图,错误:构造函数参数0的值无效

时间:2011-06-30 16:35:59

标签: google-maps-api-3 polyline

我正在创建一个地图,允许用户输入邮政编码和围绕它绘制的半径。我遇到了google.maps.Polyline的问题。我收到的错误消息是“构造函数参数0的值无效。

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

  //Store points in array 
  var points = [];
  alert("declare array ");

  // 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 google.maps.Point(circleX, circleY));


 };
    alert("completed loop");
    var Polyline_Path = new google.maps.Polyline({
    path: points,
    strokeColor: "#003F87",
    // color of the outline of the polyline
    strokeOpacity: 1,
    // between 0.0 and 1.0
    strokeWeight: 5
    // The stroke width in pixels
    });
    Polyline_Path.setMap(map);



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

}


</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>

1 个答案:

答案 0 :(得分:0)

您正在尝试使用Polyline属性的Polyline_Path对象数组创建Point(作为变量path)。但是,path属性必须是LatLng个对象的数组。