javascript - poligonos - Extraer la ruta de polígono de drawingManager Google Maps al hacer clic

navigation google maps javascript

Question

Tengo un mapa de Google con el administrador de dibujos habilitado donde un usuario puede dibujar un polígono y guardarlo en mi db. Agregué un detector de eventos al objeto drawingManager para el evento de overlaycomplete. Cuando se dispara el evento, las coordenadas del polígono se escriben en un campo oculto. Esto funciona muy bien, el único problema es que si los vértices individuales se arrastran / cambian después de ese punto, el evento no se dispara. Necesito actualizar el campo en (cualquier) cambio o iterar a través de los vértices del polígono cuando el usuario pulsa enviar y escribirlos en el campo oculto. No puedo entender cómo hacer que esto funcione, pero pueden ver lo que tengo hasta ahora aquí: http://jsfiddle.net/5Y4WT/21/

HTML:

<div id="map_canvas" style="width:500px; height:450px;"></div>
<form method="post" accept-charset="utf-8" id="map_form">
  <input type="text" name="vertices" value="" id="vertices"  />
  <input type="button" name="save" value="Save!" id="save"  />
</form>

JavaScript:

var map; // Global declaration of the map
var iw = new google.maps.InfoWindow(); // Global declaration of the infowindow
var lat_longs = new Array();
var markers = new Array();
var drawingManager;
function initialize() {
    var myLatlng = new google.maps.LatLng(40.9403762, -74.1318096);
    var myOptions = {
        zoom: 13,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP}
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.POLYGON,
    drawingControl: true,
    drawingControlOptions: {
                position: google.maps.ControlPosition.TOP_CENTER,
                drawingModes: [google.maps.drawing.OverlayType.POLYGON]
                },
                        polygonOptions: {
                            editable: true
                        }
            });
            drawingManager.setMap(map);

            google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) {
                var newShape = event.overlay;
                newShape.type = event.type;
            });

            google.maps.event.addListener(drawingManager, ''overlaycomplete'', function(event) {
                $(''#vertices'').val(event.overlay.getPath().getArray());
            });
        }
 initialize();

$(function(){
    $(''#save'').click(function(){
        //iterate polygon vertices?
    });
});

Answer 1

¡¡Lo averigué!!

Agregué la función overlayClickListener:

function overlayClickListener(overlay) {
    google.maps.event.addListener(overlay, "mouseup", function(event){
        $(''#vertices'').val(overlay.getPath().getArray());
    });
}

y lo adjuntó a la superposición en overlaycomplete:

google.maps.event.addListener(drawingManager, "overlaycomplete", function(event){
                overlayClickListener(event.overlay);
                $(''#vertices'').val(event.overlay.getPath().getArray());
            });

Para la solución en acción, consulte aquí: http://jsfiddle.net/rvsMH/1/