2015-11-06 148 views
0

我已经经历了几个类似的问题,但无法找到我的问题的解决方案。 我想以这种方式获得坐标点[(lat,lng),(lat,lng)..]等等所有即时通讯得到的结果是 {“pp”:[{“polygonjson”:[{} ,{},​​{},{},{}]}]}即使值正常,请查看我的代码。获取多个多边形谷歌地图API点

function getCordinates() { 
    var pp = []; 
    var item = {}; 
    item.pp = pp; 

    var currentCoordinates = ""; 
    console.log(polygons.length); 
    for (var i = 0; i < polygons.length; i++) { 
    var poly = polygons[i]; 
    var polygonsjson = {}; 
    var polygonjson = []; 
    polygonsjson.polygonjson = polygonjson; 
    for (var polyPointArray = 0; polyPointArray <poly.getPath().getArray().length; polyPointArray++) 
    { 
     polygonsjson.polygonjson.push(poly.getPath().getArray()[polyPointArray]); // the issue is in this line 
    } 
    item.pp.push(polygonsjson); 
    } 
    if (polygons.length == 0) 
    { 
    document.getElementById('<%= hdCordinates.ClientID %>').value = ""; 
    } 
    else 
    { 
    document.getElementById('<%= hdCordinates.ClientID %>').value = JSON.stringify(item); 
    } 

} 
+1

你想用坐标做什么? google.maps.LatLng对象有一个返回纬度的'.lat()'方法和一个返回经度的'.lng()'方法。 – geocodezip

+0

代码不是很清楚,提供了更多的代码或小提琴,以及你想要达到什么,它是多个多边形还是只是一个多边形,你想要它的顶点经纬度 –

+0

我必须将它保存在我描述的模式的数据库中,多个多边形 – Sana

回答

2

google.maps.LatLng对象具有.lat()方法返回的纬度和一个返回经度.lng()方法。

像这样的东西给您回 “polygonjson” 作为LatLngLiteral:

for (var i = 0; i < polygons.length; i++) { 
    var poly = polygons[i]; 
    var polygonsjson = {}; 
    var polygonjson = []; 
    polygonsjson.polygonjson = polygonjson; 
    for (var polyPointArray = 0; polyPointArray <poly.getPath().getArray().length; polyPointArray++) { 
    polygonsjson.polygonjson.push({lat:poly.getPath().getArray()[polyPointArray].lat(),lng:poly.getPath().getArray()[polyPointArray].lng()}); 
    } 
    item.pp.push(polygonsjson); 
} 
if (polygons.length == 0) { 
    document.getElementById('polycoords').value = ""; 
} else { 
    document.getElementById('polycoords').value = JSON.stringify(item); 
} 

proof of concept fiddle

代码片段:

var polygons = []; 
 
var item = { 
 
    pp: [] 
 
}; 
 

 
function initialize() { 
 
    var mapOptions = { 
 
    center: new google.maps.LatLng(10, 10), 
 
    zoom: 4, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
 
    mapOptions); 
 

 
    var coords2 = [ 
 
    new google.maps.LatLng(8, 10), 
 
    new google.maps.LatLng(12, 10), 
 
    new google.maps.LatLng(12, 17), 
 
    new google.maps.LatLng(8, 17), 
 
    new google.maps.LatLng(8, 10) 
 
    ]; 
 

 
    var coords3 = [ 
 
    new google.maps.LatLng(16, 12), 
 
    new google.maps.LatLng(18, 12), 
 
    new google.maps.LatLng(18, 15), 
 
    new google.maps.LatLng(16, 15), 
 
    new google.maps.LatLng(16, 12) 
 
    ]; 
 

 
    var polygon = new google.maps.Polygon({ 
 
    paths: [coords2], 
 
    strokeColor: '#FF0000', 
 
    strokeOpacity: 0.8, 
 
    strokeWeight: 1, 
 
    fillColor: '#00FF00', 
 
    fillOpacity: 0.35 
 
    }); 
 
    // alert(coords); 
 
    polygon.setMap(map); 
 
    polygons.push(polygon); 
 
    var polygon2 = new google.maps.Polygon({ 
 
    paths: [coords3], 
 
    strokeColor: '#FF0000', 
 
    strokeOpacity: 0.8, 
 
    strokeWeight: 1, 
 
    fillColor: '#00FF00', 
 
    fillOpacity: 0.35 
 
    }); 
 
    // alert(coords); 
 
    polygon2.setMap(map); 
 
    polygons.push(polygon2); 
 

 
    for (var i = 0; i < polygons.length; i++) { 
 
    var poly = polygons[i]; 
 
    var polygonsjson = {}; 
 
    var polygonjson = []; 
 
    polygonsjson.polygonjson = polygonjson; 
 
    for (var polyPointArray = 0; polyPointArray < poly.getPath().getArray().length; polyPointArray++) { 
 
     polygonsjson.polygonjson.push({ 
 
     lat: poly.getPath().getArray()[polyPointArray].lat(), 
 
     lng: poly.getPath().getArray()[polyPointArray].lng() 
 
     }); // the issue is in this line 
 
    } 
 
    item.pp.push(polygonsjson); 
 
    } 
 
    if (polygons.length == 0) { 
 
    document.getElementById('polycoords').value = ""; 
 
    } else { 
 
    document.getElementById('polycoords').value = JSON.stringify(item); 
 
    } 
 

 

 
} 
 
google.maps.event.addDomListener(window, "load", initialize);
html, 
 
body, 
 
#map_canvas { 
 
    height: 500px; 
 
    width: 500px; 
 
    margin: 0px; 
 
    padding: 0px 
 
}
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div> 
 
<input id="polycoords" size="300" />

+0

完美地工作。正是我想要的方式。谢谢一堆 – Sana