通过JSON文件遍历显示多折线

我试图渲染与从外部JSON资源拉着多个折线的地图。 每个JSON记录有若干说明性字段的以及含有LatLngs阵列的场。 该代码似乎得到JSON数据只是罚款,并适当地解析它。 然后,我通过每个记录绘制折线迭代,但由于某种原因,我不能让它显示在地图上。 这是使用谷歌地图API我的第一次。 我可能做一些愚蠢的,但通过许多例子已经受控,因为我能找到,找不到任何明显的错误。 所有建议感激地收到。

为用于显示折线的代码的基础上,从以下示例采取:http://code.google.com/intl/no/apis/maps/documentation/javascript/examples/polyline-simple.html

<!DOCTYPE html> <html> <head> <style type="text/css"> #map_canvas { width: 1024px; height: 700px; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function initialize(){ var latlng = new google.maps.LatLng(0, 23); var myOptions = { zoom: 4, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var url = "http://webstore.thedatahub.org/stevesong/afterfibre/testdata2.json?_limit=3"; var path = []; $.getJSON(url, function (data) { // Parse the Linestring field into an array of LatLngs $.each(data.data, function(index, record) { line = JSON.parse(record.Linestring); // Parse the array of LatLngs into Gmap points for(var i=0; i < line.length; i++){ path.push(new google.maps.LatLng(line[1],line[0])); } var polyline = new google.maps.Polyline({ path: path, strokeColor: '#ff0000', strokeOpacity: 1.0, strokeWeight: 3 }); polyline.setMap(map); }); }); } // google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body onload="initialize()"> <div id="map_canvas"></div> </body> </html>

--------------解决方案-------------

由于格雷格Mahlknecht提供拼图的最后一块。 为了让每一个JSON记录显示独特的,而不是一个巨大的折线,折线阵列需要在每次“。每次​​”迭代中重新初始化。 下面是最终版本,最后做什么,我是后。 感谢米奇和格雷格。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#map_canvas {
width: 1024px;
height: 700px;
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">

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

var url = "http://webstore.thedatahub.org/stevesong/afterfibre/testdata2.json?_limit=5";

$.getJSON(url, function (data) {

// Parse the Linestring field into an array of LatLngs
$.each(data.data, function(index, record) {
var mypath = new Array();
line = JSON.parse(record.Linestring);
// Parse the array of LatLngs into Gmap points
for(var i=0; i < line.length; i++){
//Tokenise the coordinates
var coords = (new String(line[i])).split(",");
mypath.push(new google.maps.LatLng(coords[1], coords[0]));
}
var polyline = new google.maps.Polyline({
path: mypath,
strokeColor: '#ff0000',
strokeOpacity: 1.0,
strokeWeight: 3
});
polyline.setMap(map);
});

});
}

// google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>

通过'行'循环时,问题不是tokenising的coorinates

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#map_canvas {
width: 1024px;
height: 700px;
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js? sensor=false"></script>

<script type="text/javascript">

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

var url = "http://webstore.thedatahub.org/stevesong/afterfibre/testdata2.json? _limit=3";
var mypath = new Array();
$.getJSON(url, function (data) {

// Parse the Linestring field into an array of LatLngs
$.each(data.data, function(index, record) {
line = JSON.parse(record.Linestring);
// Parse the array of LatLngs into Gmap points
for(var i=0; i < line.length; i++){
//Tokenise the coordinates
var coords = (new String(line[i])).split(",");
mypath.push(new google.maps.LatLng(coords[1], coords[0]));
}
var polyline = new google.maps.Polyline({
path: mypath,
strokeColor: '#ff0000',
strokeOpacity: 1.0,
strokeWeight: 3
});

polyline.setMap(map);

});

});
}

// google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>

分类:jQuery的 时间:2015-03-15 人气:2
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.816 (s). 10 q(s)