2012-07-03 77 views
0

我将googlemap上标记的多边形的坐标存储到mysql数据库中。我可以在编辑页面中绘制该多边形。我的问题是,当我通过拖动点编辑地图时,如何获得新的坐标。我读谷歌地图文档,用户可编辑的形状,但我不能得到它。请帮帮我。编辑google地图后获取坐标

在此先感谢 iijb

+0

怎么办用户编辑多边形?拖动标记?那么marker.getPosition()是你的朋友 – slawekwin

回答

0

看到Polygon.getPaths

Here is an example map是获取路径(不是路径,因为折线没有这样的方法)的文档,并使用结果在文本框中创建XML 。

+0

你能提供一些更多的细节 – iijb

+0

你的问题是什么?编辑我的答案包括一个例子。 – geocodezip

+0

如果我在编辑页面中更改多段线,如何获取新的坐标。 – iijb

0

这个怎么样

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/>"); 
     }); 





    } 

    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);