当用户单击多边形时,从getJSON获取坐标

时间:2015-03-05 12:46:10

标签: jquery json coordinates getjson geojson

我希望能够从我的json文件中获取坐标,以便在用户单击多边形时使我的多边形可编辑。我的Google地图上可以显示无限数量的多边形。

要加载我的多边形,请使用以下

$.getJSON('PATH TO FILE', function (data) {
var features = map.data.addGeoJson(data);
 });

然后我添加了一个点击地图监听器,所以当用户点击多边形时,json文件中的信息显示在div标签中,如下所示:

map.data.addListener('click', function(event) {
var WTGlobal = "rows='4' style='text-align:left; font-family:Verdana, Geneva, sans-serif; font-size:9px; width:96%'";
var RRGlobal = "type='text' size='3' maxlength='4' style='text-align:center; font-family:Verdana, Geneva, sans-serif; font-size:9px' autocomplete='off'";
var PPGlobal = "type='text' size='3' maxlength='3' style='text-align:center; font-family:Verdana, Geneva, sans-serif; font-size:9px' autocomplete='off'";
var TTGlobal = "type='text' size='3' maxlength='4' style='text-align:center; font-family:Verdana, Geneva, sans-serif; font-size:9px' autocomplete='off'";
var MMGlobal = "type='text' size='3' maxlength='4' style='text-align:center; font-family:Verdana, Geneva, sans-serif; font-size:9px' autocomplete='off'";

 document.getElementById('REGION').textContent = event.feature.getProperty('Region');
 document.getElementById('ISSUED').textContent = event.feature.getProperty('Issued');
 document.getElementById('VALIDT').textContent = event.feature.getProperty('Valid');

等等......

此时我需要帮助。 当用户点击多边形时,我希望能够从我的json文件中检索坐标,这样坐标就可以包含在新函数中,以便能够再次编辑多边形。

这是我试图检索坐标

var coords = event.feature.getGeometry('coordinates');
alert(coords);

这只会在我的警告框中返回对象。

我需要提供坐标的新功能如下:

function EditPolgons(){
 alert("Do you want to Edit polygon?");
  nowEditingShape = new google.maps.Polygon({
  paths: coords,
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35,
editable: true
});
nowEditingShape.setMap(map);
}

谢谢。

1 个答案:

答案 0 :(得分:0)

我设法弄明白了。在我的json中,我将lat,lng作为一个字符串添加,然后我可以检索它们以制作被点击的多边形的副本。然后可以编辑该副本。

map.data.addListener('dblclick', function(event) {
alert("Testing Edit Polygon");
//LOAD GeoJSON======================
$.getJSON('PATH TO URL', function (data) {
var features = map.data.addGeoJson(data);
});
var Id        =  event.feature.getProperty('Region');
var CoordsLat =  event.feature.getProperty('Lat');
var CoordsLng =  event.feature.getProperty('Lng');
var Lat  = new Array();
    var Lat  = CoordsLat.split(',');
    var Lng  = new Array();
    var Lng  = CoordsLng.split(',');
    var Paths =[];

    for (var i = 0, length = Lat.length; i < length; i++) { 
    Paths.push( new google.maps.LatLng(Lat[i],Lng[i]));
    }
    //CONSTRUCTION EDITABLE POLYGON
     EditablePolygon = new google.maps.Polygon({
     editable: true,
     paths: Paths,
     strokeColor: '#FF0000',
     strokeOpacity: 0.8,
     strokeWeight: 3,
     fillColor: '#FF0000',
     fillOpacity: 0.35
     });                

现在这意味着,如果有任何用户对多个多边形进行dblclicks,那么他们可以进行编辑,并重新绘制形状以适应。