Trích xuất drawingManager đa giác đường dẫn Google Maps khi nhấp vào

Question

Tôi có một bản đồ Google với trình quản lý bản vẽ được bật, nơi người dùng có thể vẽ đa giác và lưu nó vào db của tôi. Tôi đã thêm một trình lắng nghe sự kiện vào đối tượng drawingManager cho sự kiện overlaycomplete. Khi sự kiện được kích hoạt, các tọa độ của đa giác được ghi vào một trường ẩn. Điều này làm việc tuyệt vời - vấn đề duy nhất là nếu các đỉnh riêng lẻ được kéo/thay đổi sau thời điểm đó sự kiện không được kích hoạt. Tôi cần cập nhật trường trên (bất kỳ) thay đổi hoặc lặp qua các đỉnh đa giác khi người dùng truy cập gửi và ghi chúng vào trường ẩn. Tôi có thể không hoàn toàn tìm ra cách để có được điều này để làm việc, nhưng bạn có thể thấy những gì tôi có cho đến nay ở đây: 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

Đã tìm ra !!

tôi đã thêm chức năng overlayClickListener:

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

và gắn nó vào lớp phủ trên overlaycomplete:

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

Đối với các giải pháp trong hành động, xem tại đây: http://jsfiddle.net/rvsMH/1/