点击提取Google地图上的drawingManager多边形路径

Question

我有一个启用了绘图管理器的谷歌地图，用户可以在上面绘制多边形并将其保存到我的数据库中。我为drawingManager对象添加了一个overlaycomplete事件的监听器。当事件被触发时，多边形的坐标将被写入隐藏字段。这个方案很好——唯一的问题是，如果在此之后更改/拖动单个顶点，则不会触发事件。我需要在任何更改时更新该字段或在用户点击提交时迭代多边形顶点并将它们写入隐藏字段。我无法完全弄清楚如何使其工作，但您可以在这里查看我目前的进展: 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?
    });
});

- Yev

---

你看过使用DrawingManager并导出多边形路径的这个例子吗？它是基于Blitz Map Editor项目开发的。 - geocodezip

@geocodezip 谢谢您！我已经提取了所需的位，并且它非常有效！ - Yev

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/

- Yev

---

如何使用坐标再次加载绘图中的多边形？ - Jeeva J

@JeevaJsb，你找到怎么做了吗？ - mrcoder

你有什么需求吗？如果告诉我，我会尽力回答。 - Jeeva J