javascript - How to trigger the *start* of a Google Maps 'DrawingManager' drawing? - Stack Overflow

admin管理员组

文章数量:1404774

In my Google Maps based application, users often have to draw a pair of concentric circles on the map. I'm using the google.maps.drawing.DrawingManager for this. In the ideal scenario, a user draws the first circle normally, and then the process of drawing the second circle starts automatically, its center already set. So the user would only need one additional click to draw the second circle.

Here's what I tried:

var manager = new google.maps.drawing.DrawingManager({
    map: myMap,
    drawingControlOptions: {
        drawingModes: [google.maps.drawing.OverlayType.CIRCLE]
    }
});

var phaseOne = true;

google.maps.event.addListener(manager, 'circleplete', function (circle) {
    if (phaseOne) {
        phaseOne = false;
        // already in drawing mode, so... just trigger a click event?
        google.maps.event.trigger(myMap, 'click', {
            stop: null,
            latLng: circle.getCenter()
        });
    } else {
        phaseOne = true;
    }
}

But it doesn't work. Drawing single circles still works fine, and the phaseOne flag is being properly alternated. But the event trigger doesn't seem to do anything.

Any thoughts or suggestions?

In my Google Maps based application, users often have to draw a pair of concentric circles on the map. I'm using the google.maps.drawing.DrawingManager for this. In the ideal scenario, a user draws the first circle normally, and then the process of drawing the second circle starts automatically, its center already set. So the user would only need one additional click to draw the second circle.

Here's what I tried:

var manager = new google.maps.drawing.DrawingManager({
    map: myMap,
    drawingControlOptions: {
        drawingModes: [google.maps.drawing.OverlayType.CIRCLE]
    }
});

var phaseOne = true;

google.maps.event.addListener(manager, 'circleplete', function (circle) {
    if (phaseOne) {
        phaseOne = false;
        // already in drawing mode, so... just trigger a click event?
        google.maps.event.trigger(myMap, 'click', {
            stop: null,
            latLng: circle.getCenter()
        });
    } else {
        phaseOne = true;
    }
}

But it doesn't work. Drawing single circles still works fine, and the phaseOne flag is being properly alternated. But the event trigger doesn't seem to do anything.

Any thoughts or suggestions?

• javascript
• google-maps
• google-maps-api-3
• eventtrigger

Share Improve this question Follow asked Nov 19, 2013 at 22:47 mhelvensmhelvens 4,33344 gold badges3636 silver badges5757 bronze badges 3

• No solution... but I Started messing around with the idea of adding a second circle that is editable. I think that miiight be able to get you close. Basically pop the circle where the mouse is, stop drawing mode, and then start resizing the new circle. I have no clue if this will work though. I did see on google's site though that the typical click events are disabled in drawing mode (at the bottom). [developers.google./maps/documentation/javascript/… – TravJenkins Commented Nov 22, 2013 at 4:24
• I'm already automatically placing a second editable circle as the 'next best thing'. But simulating a click-event in non-drawing mode to resize it is pretty clever! I haven't tried that yet. :-) That being said, it feels like I should still be able to trigger an edit-mode click. If not through the Google Maps API, then through regular DOM events? But no success so far. – mhelvens Commented Nov 22, 2013 at 18:26
• it would be useful to post whole example in jsfiddle – Tomas Commented Nov 23, 2013 at 17:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3 +100

I've finally got it work ! Like TravJenkins says, all the events are disabled while in drawing mode, I've try to play around with the Google API but can't find a way to do it. I seriously thinks that the Drawing Library can be greatly improved..

I've decided to emulate a click event, saving the coordinates of the previous click.

All I have to do is to affect two variables to detect while a circle is drawing and another to stop at the second to prevent infinite drawing.

Here is the code:

var draw = false
var already = false
var event

$('#map').click(function (e) {
  if (draw === true && already === false) {
    already = true;
    click(event.clientX, event.clientY);
    draw = false;
  } else if (draw === false) {
    event = e;
    already = false;
  }
  draw = false
})

function click (x, y) {
  var ev = document.createEvent('MouseEvent')
  var el = document.elementFromPoint(x, y)
  ev.initMouseEvent(
    'click', true, true, window, null, 0, 0,
    x, y,
    false, false, false, false, 0, null
  )
  el.dispatchEvent(ev)
}

google.maps.event.addDomListener(manager, 'circleplete', function (circle) {
  draw = true
})

Hopefully the google.maps team will add some methods to permit the developer draw some overlays from code or at least to attach new overlays to the DrawingManager, but currently is not the case.

I suggest you to use a different approach I demostrate in the following exemple:

<!DOCTYPE html>

<html>
<head>    
    <title>Handling markers collection demo</title>

   <style type="text/css">
        html
        {
            height: 100%;
        }
        body
        {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map-container
        {
            height: 100%;
            width: 100%;
            min-width:500px;
            min-height:300px;
        }
    </style>
    <script src="http://code.jquery./jquery-1.10.1.min.js"></script>
    <script src="http://code.jquery./jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="https://maps.googleapis./maps/api/js?v=3.exp&sensor=false&libraries=drawing"></script>    

</head>


<body>
    <div id="map-container"></div>
    <script type="text/javascript">

        var _map,
            manager;

        $(document).ready(function () {
            var mapOptions = {
                zoom: 4,
                center: new google.maps.LatLng(-34.397, 150.644),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            _map = new google.maps.Map($("#map-container")[0], mapOptions);

            manager = new google.maps.drawing.DrawingManager({
                map: _map,
                drawingControlOptions: {
                    drawingModes: [google.maps.drawing.OverlayType.CIRCLE]
                }
            });

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

                var center = circle.getCenter(), radius = circle.getRadius();

                manager.setDrawingMode(null);
                var circleOptions = {
                        center: center,
                        editable: true,
                        map: _map,
                        radius: radius * 0.80,
                        visible: true
                    },
                    newCircle = new google.maps.Circle(circleOptions);

                google.maps.event.addListener(newCircle, 'center_changed', function () {
                    var oldCenter = center,
                        newCenter = newCircle.getCenter();

                    if (oldCenter.lat() != newCenter.lat() && oldCenter.lng() != newCenter.lng()) {
                        newCircle.setCenter(center);
                    }
                });

                google.maps.event.addListener(newCircle, 'radius_changed', function () {
                    newCircle.setEditable(false);
                });

            });
        });
    </script>
</body>
</html>

This code is available and running in this jsFiddle

本文标签： javascriptHow to trigger the *start* of a Google Maps 39DrawingManager39 drawingStack Overflow