使用Javascript编写Google Maps API，在地图上绘制圆形的半径？

Question

我正在寻找一种方法来绘制圆的半径或从圆心到圆的边缘的直线（以度数表示的精确坐标）。

是否可能？怎么做？

目前，我使用API从我的地图中心绘制了一个圆。但我认为这并没有什么帮助...

以下是我想要的示例：http://twitpic.com/aq40vv

var sunCircle = {
          strokeColor: "#c3fc49",
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: "#c3fc49",
          fillOpacity: 0.35,
          map: map,
          center: latlng,
          radius: 1500
        };
        cityCircle = new google.maps.Circle(sunCircle)

- user1603136

---

你应该发布一下你目前尝试过的代码。 - The Alpha

Answer 1

试一下这个（不确定这是否是你所要求的）

HTML：

<div id="map_canvas"></div>​

JS：

var map;
var latlng = new google.maps.LatLng(-34.397, 150.644);
function initialize() {
    var mapOptions = {
        center: latlng,
        zoom: 9,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var el=document.getElementById("map_canvas");
    map = new google.maps.Map(el, mapOptions);

    var marker = new google.maps.Marker({
        map: map,
        position: latlng
    });

    var sunCircle = {
        strokeColor: "#c3fc49",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#c3fc49",
        fillOpacity: 0.35,
        map: map,
        center: latlng,
        radius: 15000 // in meters
    };
    cityCircle = new google.maps.Circle(sunCircle)
    cityCircle.bindTo('center', marker, 'position');
}
initialize();

演示.

参考资料： 这里，还有这个可能会有帮助。

- The Alpha

---

谢谢你的帮助，但这不是我需要的。 - user1603136

我很好奇这个程序是否在计算中使用了正确的大地测量距离。它看起来是一个正确的圆形缓冲区，但当接近极点时会变形。它不仅仅是在平面距离上在一个平面地图上绘制了一个圆形。 - ADJenks

Answer 2

这种情况下，最适合使用来自google.maps.geometry.spherical命名空间的computeOffset(from:LatLng, distance:number, heading:number, radius?:number)函数，该函数在文档中有提及。

从那里开始，只需使用半径作为偏移量从圆心创建一个折线，您可以查看我制作的一个快速示例这里（只需在地图上单击即可看到它的工作原理）。

- lccarrasco

---

有没有办法在后面移动多段线？给它一个新的“路径”？ - user1603136

@Scofred 是的，Polyline 有 getPath 和 setPath 方法，你可以在文档中查看它们。 - lccarrasco

Answer 3

我同意@The Alpha的看法。

        // The marker
        var marker = new google.maps.Marker({
            position: startLatLng,
            map: map,
            icon: './img/marker.png'
        });

        var circle = {
            center: startLatLng,
            map: map,
            strokeColor: "#F26836",
            strokeOpacity: 0.2,
            strokeWeight: 2,
            fillColor: "#322F6A",
            fillOpacity: 0.2,
            radius: 50 // in meters
        };

        mapCircle = new google.maps.Circle(circle)
        mapCircle.bindTo('center', marker, 'position');

- Kelly O'blair