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

What event is triggered if a google maps drawing (like onDraw)

本文关键字：什么 事件 onDraw 谷歌地图 绘图 如果      更新时间：2023-09-26

当你在谷歌地图API中画一个圆时，我需要显示半径有多远？ 绘制圆时，我需要以英里为单位显示它。 触发什么样的事件？我尝试过"鼠标移动"，"鼠标悬停"，但在绘制圆圈时没有触发任何内容。

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

小提琴演示

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

在

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

更新

这是否可能在地图 API 中使用谷歌 MVC 对象。检查下面的小提琴

http://jsfiddle.net/jpEwM/

您需要将使用

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 演示

相关文章：