javascript - 如何获取用户绘制的圆心的经度/经度/半径

Question

我正在使用来自 https://developers.google.com/maps/documentation/javascript/examples/drawing-tools 的这个例子使用户能够选择一个点并使用户能够围绕它画一个圆圈。

但是，我还需要:

• 获取用户绘制的圆心的纬度/经度。
• 获取圆的半径。

• 此外，代码允许用户绘制多个圆圈，如果可能，我需要限制用户只能绘制一个圆圈，如果用户绘制另一个圆圈，则应删除第一个圆圈。

  
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8
    };<p></p>
  
  <p>var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);</p>
  
  <p>var drawingManager = new google.maps.drawing.DrawingManager({
      drawingMode: google.maps.drawing.OverlayType.MARKER,
      drawingControl: true,
      drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: [
          google.maps.drawing.OverlayType.MARKER,
          google.maps.drawing.OverlayType.CIRCLE,
          google.maps.drawing.OverlayType.POLYGON,
          google.maps.drawing.OverlayType.POLYLINE,
          google.maps.drawing.OverlayType.RECTANGLE
        ]
      },
      markerOptions: {
        icon: 'images/beachflag.png'
      },
      circleOptions: {
        fillColor: '#ffff00',
        fillOpacity: 1,
        strokeWeight: 5,
        clickable: false,
        editable: true,
        zIndex: 1
      }
    });
    drawingManager.setMap(map);
  }</p>
  
  <p>google.maps.event.addDomListener(window, 'load', initialize);
  </p>

Answer 1

参见 http://jsfiddle.net/stevejansen/2HpA6

(function () {
    var circle;

    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(-34.397, 150.644),
            zoom: 8
        };


        var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);

        var drawingManager = new google.maps.drawing.DrawingManager({
            drawingMode: google.maps.drawing.OverlayType.MARKER,
            drawingControl: true,
            drawingControlOptions: {
                position: google.maps.ControlPosition.TOP_CENTER,
                drawingModes: [
                google.maps.drawing.OverlayType.CIRCLE]
            },
            circleOptions: {
                fillColor: '#ffff00',
                fillOpacity: 1,
                strokeWeight: 5,
                clickable: false,
                editable: true,
                zIndex: 1
            }
        });
        drawingManager.setMap(map);
        google.maps.event.addListener(drawingManager, 'circlecomplete', onCircleComplete);
    }

    function onCircleComplete(shape) {
        if (shape == null || (!(shape instanceof google.maps.Circle))) return;

        if (circle != null) {
            circle.setMap(null);
            circle = null;
        }

        circle = shape;
        console.log('radius', circle.getRadius());
        console.log('lat', circle.getCenter().lat());
        console.log('lng', circle.getCenter().lng());
    }

    google.maps.event.addDomListener(window, 'load', initialize);
})();