如果谷歌地图绘图（如 onDraw）会触发什么事件

Question

当你在谷歌地图 API 中画一个圆时，我需要显示半径有多远？我需要在绘制圆圈时以英里显示它。触发了什么样的事件？我尝试了“MouseMove”、“MouseOver”，但在绘制圆圈时没有触发任何内容。

JavaScript

var map;
function InitializeMap() {
    var shapes = [];
    var selected_shape = null;
    var latlng = new google.maps.LatLng(29.760193, -95.36939);
    var myOptions =
        {
            zoom: 15,
            center: latlng,
            zoomControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true
        };
    if (!map) {
        map = new google.maps.Map(document.getElementById("map"), myOptions);
    }
    else {
        google.maps.event.clearListeners(map);
        google.maps.event.clearListeners(window, 'resize');
    }


    var drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: null,
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.POLYGON
      ]
        },
        markerOptions: {
            icon: '../Images/greenPinBig.png'
        },
        circleOptions: {
            fillColor: '#000000',
            fillOpacity: 0.3,
            strokeWeight: 2,
            clickable: false,
            editable: true,
            zIndex: 1
        }
    });
    drawingManager.setMap(map);
    if (google.maps.event) {
        google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
            var shape = e.overlay;
            shape.type = e.type;
            SubjectShapeType = e.type;
            google.maps.event.addListener(shape, 'click', function () {
                setSelection(this);
            });
            setSelection(shape);
            shapes.push(shape);
            drawingManager.setDrawingMode(null);
            drawingManager.setOptions({
                drawingControl: false
            });
        });

        google.maps.event.addDomListener(drawingManager, 'circlecomplete', function (circle) {
            var circles = [];
            circles.push(circle);                        

            google.maps.event.addListener(circle, 'radius_changed', function () {
                var circles = [];
                circles.push(circle);               
            });

            google.maps.event.addListener(circle, 'mouseover', function () {
                this.getMap().getDiv().setAttribute('title', circle.getRadius());
            });

            google.maps.event.addListener(circle, 'mouseout', function () {
                this.getMap().getDiv().removeAttribute('title');
            });

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

FIDDLE DEMO

我需要显示绘制圆本身的半径有多远。

在绘制圆时是否有可能以英里为单位显示半径作为工具提示。

更新

这是否可以在 Map api 中使用 Google MVC 对象。检查下面的小提琴

http://jsfiddle.net/jpEwM/

Answer 1

您需要将使用DrawingManager 绘制的圆圈转换为google.maps.Circle 才能使用radius_changed 等事件。

var map;

function initialize() {

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

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

    var drawingManager = new google.maps.drawing.DrawingManager({

        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [google.maps.drawing.OverlayType.CIRCLE]
        },

        circleOptions: {
            fillColor: '#ffff00',
            fillOpacity: 1,
            strokeWeight: 1,
            strokeColor: '#ff0000',
            clickable: false,
            editable: true
        }
    });

    drawingManager.setMap(map);

    google.maps.event.addListener(drawingManager, 'circlecomplete', function (event) {

        // Get circle center and radius
        var center = event.getCenter();
        var radius = event.getRadius();

        // Remove overlay from map
        event.setMap(null);
        drawingManager.setDrawingMode(null);

        // Create circle
        createCircle(center, radius);
    });
}

function createCircle(center, radius) {

    var circle = new google.maps.Circle({
        fillColor: '#ffffff',
        fillOpacity: .6,
        strokeWeight: 1,
        strokeColor: '#ff0000',
        draggable: true,
        editable: true,
        map: map,
        center: center,
        radius: radius
    });

    google.maps.event.addListener(circle, 'radius_changed', function (event) {

        console.log('circle radius changed');
    });

    google.maps.event.addListener(circle, 'center_changed', function (event) {

        console.log('circle center changed');
    });
}

initialize();

如果您不想在绘制第一个圆圈后自动禁用绘制，请删除以下行：

drawingManager.setDrawingMode(null);

希望这会有所帮助。

JSFiddle demo