谷歌地图：在创建圆时获取圆覆盖的半径答案

【问题标题】：google map : get radius of circle overlay while creating circle谷歌地图：在创建圆时获取圆覆盖的半径
【发布时间】：2014-11-09 21:24:59
【问题描述】：

我正在创建一个使用地图的 Web 应用程序。在地图上我正在创建圆圈并希望在 div 中显示半径。在使用覆盖完成事件完成半径后，我可以显示半径。但我想在创建圆时在 div 中显示半径，以允许用户绘制具有自己长度半径的圆。有没有办法做到这一点。请帮我解决这个问题。任何反馈和帮助都将受到欢迎和赞赏。提前谢谢。

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
        deleteSelectedShape();
        selectedShape = e.overlay;

       //selectedShape.setEditable(true);
      //overlayClickListener(selectedShape);

       if (e.type == google.maps.drawing.OverlayType.CIRCLE) {
            var bound = e.overlay.getBounds();
            bounds = bound;
            var radius = e.overlay.getRadius();
            radius = (radius/1000);
            $('#radius_size').html("Radius "+Math.round(radius)+" Km");

        } 
        else if (e.type == google.maps.drawing.OverlayType.RECTANGLE) {
               deleteSelectedShape();
               var bound = e.overlay.getBounds();
               map.fitBounds(bound);

        }

【问题讨论】：

DrawingManager 类只有在形状完成时才具有事件监听器，而不是在它们被拖出时。我认为您也许可以在地图上使用鼠标事件之类的东西，例如单击和拖动，但根据the docs "google.maps.Map 事件，例如单击和鼠标移动在绘图时被禁用地图”
具有标准形状的事件，您没有让您在编辑形状时获取半径的事件。您有一个 radius_changed 事件，但它只会在您释放鼠标/完成编辑时触发。编辑形状时不会触发其他鼠标事件。即使使用计时功能，在编辑形状时我似乎也无法获得 cricle 半径。
* 即使是标准形状...

标签： javascript google-maps google-maps-api-3

【解决方案1】：

请参阅“文章”Fun with MVC Objects 中的this example in the documentation，如果您在创建圆时显示半径（在此示例中，通过在 init 函数中添加 displayInfo(distanceWidget)）：

function init() {
    var mapDiv = document.getElementById('map-canvas');
    var map = new google.maps.Map(mapDiv, {
        center: new google.maps.LatLng(37.790234970864, -122.39031314844),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var distanceWidget = new DistanceWidget(map);

    google.maps.event.addListener(distanceWidget, 'distance_changed', function () {
        displayInfo(distanceWidget);
    });

    google.maps.event.addListener(distanceWidget, 'position_changed', function () {
        displayInfo(distanceWidget);
    });
    displayInfo(distanceWidget);
}

fiddle

【讨论】：