多边形围绕中心点绘制

时间:2013-10-30 19:09:18

标签: javascript google-maps-api-3

我尝试了很多,但无法弄清楚问题。我想在特定的lat,lng周围绘制一个多边形。多边形将由特定半径的13个坐标组成。

  1. 人员在文本框中的地址和半径之间。
  2. 地理代码获取该地址的lat,lng
  3. 将地图置于那里。
  4. 使用半径
  5. 围绕该中心点绘制多边形
  6. 多边形应包含13个坐标
  7. 代码

    function showAddress(address, miles) {
                var geocoder = new google.maps.Geocoder();
                geocoder.geocode({
                    address : address
                }, function(results, status) {
                    if(status == google.maps.GeocoderStatus.OK) {
                        //searchLocationsNear(results[0].geometry.location);
                        var cordinate = results[0].geometry.location;
                        //alert(cordinate);
                        var mapOptions = {
                            center : cordinate,
                            zoom : 8,
                            mapTypeId : google.maps.MapTypeId.ROADMAP,
                            overviewMapControl : true,
                            overviewMapControlOptions : {
                                opened : true,
                                position : google.maps.ControlPosition.BOTTOM_LEFT
                            }
    
                        };
    
                        //
                        //var address = document.getElementById("address").value;
                        var radius = 1;
                        var latitude = 23.1793013;
                        var longitude = 75.78490970000007;
                        //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 = [];
                        alert("declare array");
    
                        var bounds = new google.maps.LatLngBounds();
    
                        // Calculate the points
                        // Work around 360 points on circle
                        for(var i = 0; i < 13; i++) {
    
                            var theta = Math.PI * (i / 180);
    
                            // Calculate next X point
                            circleY = longitude + (cLng * Math.cos(theta));
                            //console.log("CircleY:"+circleY);
                            // Calculate next Y point
                            circleX = latitude + (cLat * Math.sin(theta));
                            //console.log("circleX:"+circleX);
                            // Add point to array
                            var aPoint = new google.maps.LatLng(circleX, circleY);
                            points.push(aPoint);
                            bounds.extend(aPoint);
    
                        }
                        points.push(points[0]);
                        //console.log(points);
                        //to complete circle
    
                        var colors = ["#CD0000", "#2E6444", "#003F87"];
    
                        var Polyline_Path = new google.maps.Polyline({
                            path : points,
                            strokeColor : colors[0],
                            // color of the outline of the polygon
                            strokeOpacity : 1,
                            // between 0.0 and 1.0
                            strokeWeight : 1,
                            // The stroke width in pixels
                            fillColor : colors[1],
                            fillOpacity : 0
                        });
                        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
                        Polyline_Path.setMap(map);
    
    
                    } else {
                        alert(address + ' not found');
                    }
                });
            }
    

2 个答案:

答案 0 :(得分:3)

替换i&lt; 13; i ++

I&LT; 360; I + =十三分之三百六十零

这将起作用

感谢

编辑:不需要最后一点,因为gmap会自动关闭它

答案 1 :(得分:1)

我认为cLng应该更改为:

var cLng = cLat * Math.cos(latitude * d2r);

(要得到一个完美的圆)