How to trigger the *start* of a Google Maps 'DrawingManager' drawing?

问题

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, 'circlecomplete', 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?

回答1:

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, 'circlecomplete', function (circle) {
  draw = true
})

回答2:

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.com/jquery-1.10.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/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, 'circlecomplete', 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

来源：https://stackoverflow.com/questions/20083782/how-to-trigger-the-start-of-a-google-maps-drawingmanager-drawing

标签

javascript

google-maps

google-maps-api-3

eventtrigger