Question

我正在创建一个使用地图的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);

        }

Answer 1

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

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

谷歌地图：创建圆圈时获得圆形叠加半径

1 个答案: