Extract drawingManager polygon path Google Maps on click

Question

Ich habe eine Google Map mit Zeichnungsmanager aktiviert, wo ein Benutzer ein Polygon zeichnen und es in meine Datenbank speichern kann. Ich habe dem drawingManager-Objekt für das overlaycomplete-Ereignis einen Ereignis-Listener hinzugefügt. Wenn das Ereignis ausgelöst wird, werden die Koordinaten des Polygons in ein verborgenes Feld geschrieben. Das funktioniert gut - das einzige Problem ist, dass das Ereignis nicht ausgelöst wird, wenn die einzelnen Scheitelpunkte nach diesem Punkt gezogen/geändert werden. Ich muss entweder das Feld bei (jeder) Änderung aktualisieren oder durch die Polygonscheitelpunkte iterieren, wenn der Benutzer submit trifft und sie in das versteckte Feld schreibt. Ich kann nicht ganz herausfinden, wie diese Arbeit zu bekommen, aber Sie können sehen, was ich bisher hier: 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

Ich habe es herausgefunden !!

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

und es auf overlaycomplete an die Auflage gebunden:

I Funktion overlayClickListener hinzugefügt

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

Für die Lösung in Aktion finden Sie hier: http://jsfiddle.net/rvsMH/1/