ड्रॉइंग मैनेजर पॉलीगॉन पथ Google मानचित्र पर क्लिक करें

Question

मेरे पास ड्रॉइंग मैनेजर सक्षम वाला एक Google मानचित्र है जहां कोई उपयोगकर्ता बहुभुज खींच सकता है और इसे मेरे डीबी में सहेज सकता है। मैंने overlaycomplete घटना के लिए drawingManager ऑब्जेक्ट में एक ईवेंट श्रोता जोड़ा। जब घटना को निकाल दिया जाता है, बहुभुज के निर्देशांक एक छिपे हुए क्षेत्र में लिखे जाते हैं। यह बहुत अच्छा काम करता है - एकमात्र समस्या यह है कि यदि उस बिंदु के बाद व्यक्तिगत शिखर को खींचा/बदला जाता है तो ईवेंट को निकाल दिया नहीं जाता है। जब मैं उपयोगकर्ता हिट करता हूं और छिपे हुए क्षेत्र में लिखता हूं तो मुझे बहुभुज शिखर के माध्यम से (किसी भी) परिवर्तन या फिर से क्षेत्र को अद्यतन करने की आवश्यकता होती है। मैं काफी को समझ नहीं सकता कि यह कैसे काम करने के लिए प्राप्त करने के लिए है, लेकिन आप क्या मैं अब तक यहाँ देख सकते हैं: 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> 

जावास्क्रिप्ट:

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

इसे समझ लिया !!

मैं समारोह overlayClickListener कहा:

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

और ओवरले के लिए इसे संलग्न overlaycomplete पर:

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

कार्रवाई में समाधान के लिए, यहाँ देखें: http://jsfiddle.net/rvsMH/1/