如何获取用户绘制圆的中心点的纬度、经度和半径?涉及IT技术相关内容。

8

我将使用来自https://developers.google.com/maps/documentation/javascript/examples/drawing-tools的示例,使用户能够选择一个点并绘制一个圆圈。

但是,我还需要:

  • get the lat/lang of center of circle that user draw.
  • get the radius of circle.
  • also the code allows user to draw more than one circle, if possible, I need to restrict user to draw only one circle, if user draw another circle, first circle should be removed.

    
    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.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); }

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


1
可能是Google Maps获取半径的重复问题。 - geocodezip
是的,这个示例展示了如何读取半径,但我仍然不知道如何允许用户只绘制一个圆(通过删除以前的圆)。 - user836026
2个回答

16

请参考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);
})();

非常感谢...这正是我所需要的!! - user836026

0

GoogleMap 地图;

 // Add a circle in Sydney
 Circle circle = map.addCircle(new CircleOptions()
     .center(new LatLng(-33.87365, 151.20689))
     .radius(10000)
     .strokeColor(Color.RED)
     .fillColor(Color.BLUE));
<-- to get radius of any location in map, use this code. It shows the radius value from center of map to x and y coordinates.-->
 Toast.makeText(app.getBaseContext(),***[circle.getRadius()][1]***, 
                Toast.LENGTH_SHORT).show();

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接