单击提取drawingManager多边形路径Google地图 [英] Extract drawingManager polygon path Google Maps on click

问题描述

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

HTML：

 < div id =map_canvasstyle =width：500px; height：450px;>< / div> 
< form method =postaccept-charset =utf-8id =map_form> 
< input type =textname =verticesvalue =id =vertices/> 
< input type =buttonname =savevalue =Save！ id =save/> 
< / form> 
  

JavaScript：

  var map; //地图的全局声明
 var iw = new google.maps.InfoWindow（）; // infowindow的全局声明
 var lat_longs = new Array（）; 
 var markers = new Array（）; 
 var drawingManager; 
函数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：{
位置：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？
}）; 
}）; 
  

解决方案

想象出来

我添加了函数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/

I have a Google map with drawing manager enabled where a user can draw a polygon and save it to my db. I added an event listener to the drawingManager object for the overlaycomplete event. When the event is fired, the coordinates of the polygon are written to a hidden field. This works great - the only problem being that if the individual vertices are dragged/changed after that point the event isn't fired. I need to either update the field on(any)change or iterate through the polygon vertices when the user hits submit and write them to the hidden field. I can't quite figure out how to get this to work, but you can see what I have so far here: 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?
    });
});

解决方案

Figured it out!!

I added function overlayClickListener:

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

and attached it to the overlay on overlaycomplete:

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

For the solution in action, see here: http://jsfiddle.net/rvsMH/1/

这篇关于单击提取drawingManager多边形路径Google地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！