javascript - What event is triggered if a google maps drawing (like onDraw) - Stack Overflow

admin管理员组

文章数量:1425717

When you draw a circle in google maps API, I need to show how far the radius is? and i need to display it in Miles when drawing the circle. what kind of event is triggered ? I have tried "MouseMove", "MouseOver" but nothing is triggered while drawing the circle.

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, 'overlayplete', 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, 'circleplete', 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

I need to show How far the radius on drawing circle itself.

Is there any possible to show radius in miles as tooltip while drawing circle.

Update

Is this possible using Google MVC object in Map api. Check below fiddle

/

When you draw a circle in google maps API, I need to show how far the radius is? and i need to display it in Miles when drawing the circle. what kind of event is triggered ? I have tried "MouseMove", "MouseOver" but nothing is triggered while drawing the circle.

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, 'overlayplete', 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, 'circleplete', 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

I need to show How far the radius on drawing circle itself.

Is there any possible to show radius in miles as tooltip while drawing circle.

Update

Is this possible using Google MVC object in Map api. Check below fiddle

http://jsfiddle/jpEwM/

• javascript
• google-maps
• google-maps-api-3
• geometry

Share Improve this question Follow edited May 12, 2015 at 3:31 Vignesh Kumar A asked Mar 17, 2015 at 14:01 Vignesh Kumar AVignesh Kumar A 28.5k1414 gold badges6767 silver badges119119 bronze badges 3

• how about mouseup and mousedown? get the starting position when down and ending when up? – kaho Commented Mar 17, 2015 at 14:37
• Can you please give me a fiddle of it – Vignesh Kumar A Commented Mar 17, 2015 at 15:37
• These events don't exist on the drawing manager. – MrUpsidown Commented Mar 17, 2015 at 16:41

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You need to convert the circle drawn with the DrawingManager to a google.maps.Circle to be able to use the events such as radius_changed etc.

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, 'circleplete', 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();

Remove the following line if you don't want to disable drawing automatically once the first circle is drawn:

drawingManager.setDrawingMode(null);

Hope this helps.

JSFiddle demo

本文标签： javascriptWhat event is triggered if a google maps drawing (like onDraw)Stack Overflow