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

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

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/

Share Improve this question edited May 12, 2015 at 3:31 asked Mar 17, 2015 at 14:01 Vignesh Kumar A 28.5k14 gold badges67 silver badges119 bronze badges

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

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

1 Answer 1

与本文相关的文章

评论列表(0)