Fatal编程技术网

Google maps api 3 谷歌地图v3完全填补了这个圈子

google-maps-api-3 geometry

Google maps api 3 谷歌地图v3完全填补了这个圈子,google-maps-api-3,geometry,Google Maps Api 3,Geometry,我创建了一个地图，允许用户围绕一个具有指定半径的点绘制一个圆。由于某些原因，圆圈没有完全填满，当地图放大时，这一点尤其明显。也许有人有一个解决方案，即使在更高的缩放级别上观看，也可以完全填充圆 请参阅下面的代码 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type

我创建了一个地图，允许用户围绕一个具有指定半径的点绘制一个圆。由于某些原因，圆圈没有完全填满，当地图放大时，这一点尤其明显。也许有人有一个解决方案，即使在更高的缩放级别上观看，也可以完全填充圆

请参阅下面的代码

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


html{高度：100%}
正文{高度：100%；边距：0px；填充：0px}
#地图画布{高度：100%}
var地理编码器；
var映射；
var计数=0；
//在数组中存储点
var点=[]；
函数初始化（）{
geocoder=新的google.maps.geocoder（）；
var latlng=新的google.maps.latlng（-34.397150.644）；
变量myOptions={
缩放：3，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
}     
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
}    
函数codeAddress（）{
var address=document.getElementById（“地址”）.value；
geocoder.geocode（{'address'：address}，函数（结果，状态）{
如果（status==google.maps.GeocoderStatus.OK）{
map.setCenter（结果[0].geometry.location）；
var marker=new google.maps.marker（{
地图：地图，
位置：结果[0]。几何体。位置
}); 
}
否则{
警报（“地理编码因以下原因未成功：“+状态”）；
}     
});   
}
函数pluscont（）{
如果（计数=2）{
计数=0；
}
否则{
计数=计数+1；
}
}   
函数drawCircle（）{
var address=document.getElementById（“地址”）.value；
var radius=document.getElementById（“radius”）.value；
纬度=40；
var经度=0；
geocoder.geocode（{'address'：address}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
latlng=（结果[0]。几何体。位置）；
纬度=latlng.lat（）；
经度=latlng.lng（）；
警报（纬度）；
警报（经度）；
警报（半径）；
}   
否则{
警报（“地理编码因以下原因未成功：“+状态”）；
}
});
//度到弧度
var d2r=Math.PI/180；
警报（“计算d2r”+d2r）；
//弧度
var r2d=180/Math.PI；
警报（“计算r2d”+r2d）；
//地球半径为3963英里
var cLat=（半径/3963）*r2d；
警报（“calc cLat”+cLat）；
var cLng=cLat/Math.cos（纬度*d2r）；
警报（“计算cLng”+cLng）；
//计算积分
//围绕圆上的360点工作
对于（变量i=0；i<360；i++）{
varθ=数学PI*（i/16）；
//计算下一个X点
圆=经度+（cLng*Math.cos（θ））；
//计算下一个Y点
circleX=纬度+（cLat*Math.sin（θ））；
//将点添加到阵列
points.push（新的google.maps.LatLng（circleX，circleY））；
};
警报（“完成循环”）；
变量颜色=[“#CD0000”、“#2E6444”、“#003F87”]；
var Polyline_Path=新建google.maps.Polyline({
路径：点，
strokeColor:颜色[计数]，
//多段线轮廓的颜色
频闪不透明度：1，
//介于0.0和1.0之间
冲程重量：1，
//笔划宽度（以像素为单位）
fillColor:颜色[计数]，
填充不透明度：.5
});
多段线路径设置图（map）；
}
函数clearMap（）{
如果（点数）{
用于（以点为单位）{
点[i]。设置映射（空）；
}
点。长度=0；
}}
邮政编码：
半径：
看起来您是在手动绘制圆，但您可以使用 这对我来说很有用，并且完全填满了这个圈子。下面是我在应用程序中使用的一个片段，它也适用于最大缩放级别：

var circ = new google.maps.Circle({
    'center':lc,
    'clickable':false,
    'fillColor':"#00FFFF",
    'fillOpacity':0.2, 
    'map':currentmap,
    'radius':75, 
    'strokeColor':'#0000A0',
    'strokeOpacity':'0.5'
});
lc是我的中心点，currentmap是map div

此方法适合我

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

var circle = new google.maps.Circle(options);
这对我来说很有效。

里奇的答案在我的项目中正确

function searchLocations() {
     var image='image/male.png'
     var a = document.getElementById("radiusSelect").value; 
     var address = document.getElementById("addressInput").value;
     var geocoder = new google.maps.Geocoder();
     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,
        icon: image
    });
    var circle = new google.maps.Circle({
         map: map,
          radius: parseInt(a),    // 10 miles in metres
         fillColor: '#AA0000'
            });
    circle.bindTo('center', marker, 'position');
    searchLocationsNear(results[0].geometry.location);
   } 
   else {
     alert(address + ' not found');
   }
  });
 }
我试着用map_canvas代替currentmap，用latlng代替lc，但似乎不起作用我让它起作用了，但如何将用户输入的平移半径转换为英里？ 
function searchLocations() {
     var image='image/male.png'
     var a = document.getElementById("radiusSelect").value; 
     var address = document.getElementById("addressInput").value;
     var geocoder = new google.maps.Geocoder();
     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,
        icon: image
    });
    var circle = new google.maps.Circle({
         map: map,
          radius: parseInt(a),    // 10 miles in metres
         fillColor: '#AA0000'
            });
    circle.bindTo('center', marker, 'position');
    searchLocationsNear(results[0].geometry.location);
   } 
   else {
     alert(address + ' not found');
   }
  });
 }