单击时提取drawingManager多边形路径Google Maps

我有一个启用了绘图管理器的Google地图，用户可以绘制多边形并将其保存到我的数据库中。 我为overlaycomplete事件的drawingManager对象添加了一个事件监听器。 触发事件时，多边形的坐标将写入隐藏字段。 这很有效 – 唯一的问题是如果在该点之后拖动/更改了各个顶点，则不会触发事件。 我需要更新（任何）更改字段或在用户点击提交时迭代多边形顶点并将其写入隐藏字段。 我无法弄清楚如何让它工作，但你可以看到我到目前为止所拥有的： http ： //jsfiddle.net/5Y4WT/21/

HTML：

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

弄清楚了！！

我添加了functionoverlayClickListener：

 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/