Wyodrębnij rysunekManager ścieżka wielokąta Mapy Google po kliknięciu

Question

Mam mapę Google z włączonym menedżerem rysunków, w którym użytkownik może narysować wielokąt i zapisać go w swojej bazie danych. Dodałem detektor zdarzeń do obiektu drawingManager dla zdarzenia overlaycomplete. Po wystrzeleniu zdarzenia współrzędne wielokąta są zapisywane w ukrytym polu. Działa to świetnie - jedynym problemem jest to, że jeśli poszczególne wierzchołki są przeciągane/zmieniane po tym punkcie, zdarzenie nie jest uruchamiane. Muszę zaktualizować pole na (dowolnej) zmianie lub iterować przez wierzchołki wielokątów, gdy użytkownik trafi w celu przesłania i zapisać je w ukrytym polu. Nie mogę dość dowiedzieć się, jak uzyskać to do pracy, ale można zobaczyć, co mam tak daleko tutaj: 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

Wyliczyłem to !!

dodałem funkcję overlayClickListener:

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

i dołączony go do nakładki na overlaycomplete:

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

Do roztworu w działaniu, zobacz tutaj: http://jsfiddle.net/rvsMH/1/