如何在编辑圆形后获取半径... Google Maps API

Question

如何在编辑圆形后获取半径... Google Maps API

3

我正在尝试在编辑圆形后获取半径，我使用drawingManager库将圆形绘制到地图上。以下是代码的一部分：

<script type="text/javascript">



    function initialize() {
        var mapOptions = {
          //center: new google.maps.LatLng(-34.397, 150.644),
          center: new google.maps.LatLng(4.705, -74.113),
          zoom: 5,
          mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById('map_canvas'),
      mapOptions);
    redondo = new google.maps.Circle(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/marker_sprite.png'
      },
      circleOptions: {
        strokeColor: '#FF0000',
        fillColor: '#DF0101',
        fillOpacity: 0.3,
        strokeWeight: 2,
        editable:true

      },
       rectangleOptions: {
          strokeColor: "#FF0000",
          strokeWeight: 2,
          fillColor: '#DF0101',
          fillOpacity: 0.35,
       },
       polygonOptions: {
          strokeColor: "#FF0000",
          strokeWeight: 2,
          fillColor: '#DF0101',
          fillOpacity: 0.35,
       }            
    });
    drawingManager.setMap(map);
    google.maps.event.addListener(drawingManager,'circlecomplete', function(circle){
         radius = circle.getRadius();
        document.getElementById("radio").innerHTML=radius;
        redondo=circle;

    });

    google.maps.event.addListener(drawingManager, 'polygoncomplete', function(Polygon) {
        var vertices = Polygon.getPath();
        var pocision="";
        for (var i=0; i < vertices.length; i++){
            var xy=vertices.getAt(i);
            pocision += "<br>"+ xy.lng() +" , " + xy.lat();
            document.getElementById("posicion").innerHTML=pocision;
          }
          //document.getElementById("posicion").innerHTML= Polygon.getPaths(latlang).tostring;
        });


    var redondo= new google.maps.circle();
    google.maps.event.addListener(redondo, 'radius_changed', function(){

    --///////// in this part of the code don't enter 
        alert('buenaS');
    });
  }

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

</script>
</head>
<body>
     <div id="map_canvas" style="width: 500px; height: 400px; display:table-cell"></div>
     <div style="margin:0px 0px 0px 800px; display:table-cell">     
        Posicion: <span id="posicion" style="display:none"></span><br>      
        Radio = <span id="radio"></span>        
     </div>

我在寻找修改半径并调用“radius_changed”事件处理程序的方法，但对我来说无法运行。

- Deathshoo7

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dr.Molle · Accepted Answer

观察圆的 radius_changed 事件：

google.maps.event.addListener(drawingManager,'circlecomplete', function(circle){
             radius = circle.getRadius();
            document.getElementById("radio").innerHTML=radius;
            redondo=circle;

            //observe radius_changed
            google.maps.event.addListener(redondo,'radius_changed',function(){
            alert(this.getRadius())
          })

        });