我有一个包含多边形数组的JSON字符串。您能告诉我如何更新以下代码以循环和解析此WebAPI(JSON)中的多边形。您可以找到多边形的坐标到"周边" - http://track.asiacom.co.th/fmswebapi/api/zoneinfo
这是我的代码
var url = 'http://track.asiacom.co.th/fmswebapi/api/zoneinfo';
$.getJSON(url, function (zones) {
for (var i = 0; i < zones.length; i++) {
var zone = zones[i];
var name = zone.Name;
var type = zone.Type;
var perimeter = zone.Perimeter;
var company = zone.Company;
var color = zone.Color;
var coords = perimeter.split(",");
pathCoordinates.push(new google.maps.LatLng(parseFloat(coords[0]), parseFloat(coords[1])));
// Construct the polygon.
polygon = new google.maps.Polygon({
path: pathCoordinates,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map
});
polygon.setMap(map);
// Add a listener for the click event.
google.maps.event.addListener(polygon, 'click', showArrays);
infoWindow = new google.maps.InfoWindow();
// Click Zones
google.maps.event.addListener(polygon, 'click', (function (polygon, i) {
return function () {
map.panTo(this.position);
}
})(polygon, i));
}
return zones;
}
)
答案 0 :(得分:2)
你真的有必要使用json字符串或只是一个例子吗?如果不是一个例子你的应用程序将失败当另一个赞助人来到外围...无论如何我绘制,(你有一个Polygono只有2分)。
修改:JSBin
$(function () {
initialize();
});
var url = 'http://track.asiacom.co.th/fmswebapi/api/zoneinfo';
var pathCoordinates = [];
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 2,
center: new google.maps.LatLng(12.473727562827564, 180.55709464999995),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
zoomControl: true
});
}
$.getJSON(url, function (zones) {
console.log(zones);
for (var i = 0; i < zones.length; i++) {
var zone = zones[i];
var name = zone.Name;
var type = zone.Type;
var perimeter = zone.Perimeter;
var company = zone.Company;
var color = zone.Color;
var coords = perimeter.split(" ");
var recoords;
for (var k = 0; k < coords.length; k++) {
recoords = coords[k].split(",");
pathCoordinates.push(new google.maps.LatLng(parseFloat(recoords[0]), parseFloat(recoords[1])));
};
// Construct the polygon.
polygon = new google.maps.Polygon({
path: pathCoordinates,
strokeColor: color,
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: color,
fillOpacity: 0.35,
Company: company,
Name: name,
map: map
});
pathCoordinates = [];
}
polygon.setMap(map);
});
如果您没有使用此模式获取lat / lng并使用c#或java查看此帖子Return object(markers,polygon,polyline) to javascript from C#
对不起我的英文;)