2013-11-27 56 views
0

我已经成功创建和编辑了多边形,绘制了多边形之后,我得到了多边形的坐标,我在寻找的是编辑多边形之后,我没有多边形的新坐标(拖动结束后,我得到的坐标,立即新的坐标应显示为当我画多边形发生)。如何在Google地图中获取新编辑的多边形坐标apiv3

我的Java脚本:

var map; 
    var coords = []; 
    var lats = []; 
    var lngs = []; 
    var myMarkers = []; 
    var myPoly; 
    function initialize() { 
     var latlng = new google.maps.LatLng(17.397821, 78.479354); 
     var mapOptions = { 
      zoom: 15, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.TERRAIN 
     } 
     map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
     addEventListener_marker(); 

    } 
    function addEventListener_marker() { 
     google.maps.event.addListener(map, 'click', function (e) { 
      coords.push(e.latLng); 
      lats.push(e.latLng.lb); 
      lngs.push(e.latLng.mb); 
      placeMarker(e.latLng, map); 
     }); 
    } 

    function placeMarker(position, map) { 
     var mark = new google.maps.Marker({ 
      position: position, 
      map: map, 
      draggable: false 
     }); 
     myMarkers.push(mark); 
    } 

    function createPoly() { 
     polyOptions = { 
      path: coords, 
      strokeColor: "#FF0000", 
      strokeOpacity: 0.8, 
      strokeWeight: 2, 
      fillColor: "#FF6803", 
      fillOpacity: '0.25', 
      draggable: true, 
      editable: true 
     } 
     myPoly = new google.maps.Polygon(polyOptions); 
     myPoly.setMap(map); 
     google.maps.event.addListener(myPoly, 'click', isWithinPoly); 
     markerCoords(); 
     //removeEventListener(); 
     clearOverlays(); 

    } 

    function markerCoords() { 
     var curLatLng = []; 
     curLatLng = myPoly.getPath().getArray(); 
     $("#info").append("coordinates are: Latitude: " + curLatLng + "<br/>"); 
     //google.maps.event.addListener(myPoly, 'shape_changed', function() { 
     google.maps.event.addListener(myPoly, 'dragend', function() { 
      //alert("drag end"); 
      var curLatLng; 
      curLatLng = myPoly.getPath().getArray(); 
      $("#info").append("coordinates are: Latitude: " + curLatLng + "<br/>"); 
     }); 

     google.maps.event.addListener(myPoly, 'set_at', function() { 
      //alert("drag end"); 
      var curLatLng1; 
      curLatLng1 = myPoly.getPath().getArray(); 
      $("#info").append("coordinates are: Latitude: " + curLatLng1 + "<br/>"); 
     }); 

     google.maps.event.addListener(myPoly, 'insert_at', function() { 
      //alert("drag end"); 
      var curLatLng2; 
      curLatLng2 = myPoly.getPath().getLength(); 
      $("#info").append("coordinates are: Latitude: " + curLatLng2 + "<br/>"); 
     }); 

    } 

    function removeEventListener() { 
     //google.maps.event.clearListeners(map, 'bounds_changed'); 
    } 
    function clearOverlays() { 
     setAllMap(null); 
    } 
    function setAllMap(map) { 
     for (var i = 0; i < myMarkers.length; i++) { 
      myMarkers[i].setMap(map); 
     } 
    } 
    function isWithinPoly(event) { 
     var isWithinPolygon = google.maps.geometry.poly.containsLocation(event.latLng, this); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 

和HTML是:

<div id="map-canvas"></div> 
<p id="info"></p> 

<input type="button" onclick="createPoly();" value="draw polygon" /> 

编辑:

我使用的三个事件的set_at和其他两名这样的,但没有被解雇。

function markerCoords() { 
     var curLatLng = []; 
     curLatLng = myPoly.getPath().getArray(); 
     $("#info").append("coordinates are: Latitude: " + curLatLng + "<br/>"); 
     //google.maps.event.addListener(myPoly, 'shape_changed', function() { 
     google.maps.event.addListener(myPoly, 'dragend', function() { 
      alert("drag end"); 
      var curLatLng; 
      curLatLng = myPoly.getPath().getArray(); 
      $("#info").append("coordinates are: Latitude: " + curLatLng + "<br/>"); 
     }); 

     google.maps.event.addListener(myPoly, 'set_at', function() { 
      alert("set_at"); 
      var curLatLng; 
      curLatLng = myPoly.getPath().getArray(); 
      $("#info").append("coordinates are: Latitude: " + curLatLng + "<br/>"); 
     }); 

     google.maps.event.addListener(myPoly, 'insert_at', function() { 
      alert("insert_at"); 
      var curLatLng; 
      curLatLng = myPoly.getPath().getArray(); 
      $("#info").append("coordinates are: Latitude: " + curLatLng + "<br/>"); 
     }); 

     google.maps.event.addListener(myPoly, 'remove_at', function() { 
      alert("remove_at"); 
      var curLatLng; 
      curLatLng = myPoly.getPath().getArray(); 
      $("#info").append("coordinates are: Latitude: " + curLatLng + "<br/>"); 
     }); 
    } 

回答

1

观察事件set_atinsert_at和多边形路径的remove_at

google.maps.event.addListener(myPoly.getPath(), 'set_at', markerCoords); 
    google.maps.event.addListener(myPoly.getPath(), 'insert_at',markerCoords); 
    google.maps.event.addListener(myPoly.getPath(), 'remove_at',markerCoords); 
+0

您好,感谢您的时间,也可以请你告诉我set_at,insert_at和remove_at会做什么。 cz我对Google地图非常陌生 – UiUx

+0

我编辑了关于set_at和其他两个事件的问题。只有dragend事件被触发(警报),而其他事件不被触发。 – UiUx

+0

这些是[google.maps.MVCArray](https://developers.google.com/maps/documentation/javascript/reference?hl=zh-CN&csw=1#MVCArray)的事件(多边形路径是MVCArray)。多边形不是MVCArray(但是在您更新的代码中,您将侦听器添加到“myPoly”,而不是“myPoly.getPath()”) –

相关问题