javascript Google map api v3 从数组中添加折线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8176349/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google map api v3 add polylines from array
提问by Loren Zimmer
I'm trying to add a set of poly lines to a google map from an array.
我正在尝试从数组向谷歌地图添加一组折线。
Here is my code:
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 90% }
body { height: 90%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var poly;
var map;
function initialize() {
var latlng = new google.maps.LatLng(38.698044, -77.210411);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
//var myLatLng = new google.maps.LatLng(0, -180);
}
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
var path = new MVCArray;
$.getJSON('json.php', function(data) {
//var items = [];
$.each(data, function(key, val) {
path.push(new google.maps.LatLng(val.lat, val.longi));
});
});
var myOptions = {
zoom: 12,
//center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:90%; height:100%"></div>
</body>
</html>
<html>
<head>
</head>
<body>
</body>
</html>
Any thoughts on why the line path.push(new google.maps.LatLng(val.lat, val.longi)); isn't adding the data in?
关于为什么线路 path.push(new google.maps.LatLng(val.lat, val.longi)); 的任何想法；不是在添加数据吗？
Or is there a better way for me to loop the data in?
或者有没有更好的方法来循环数据？
回答by duncan
So you loop over the contents of data, adding things into the array, path.... and then, what? Nothing as far as I can see. Presumably you then want to use that path array to set the path for your polyline.
所以你遍历 的内容data，将东西添加到数组中，path......然后，什么？就我所见，什么都没有。大概您然后想使用该路径数组来设置多段线的路径。
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
var path = new MVCArray;
$.getJSON('json.php', function(data) {
//var items = [];
$.each(data, function(key, val) {
path.push(new google.maps.LatLng(val.lat, val.longi));
});
// now update your polyline to use this path
poly.setPath(path);
});
PS: Your HTML structure is all wrong:
PS：你的HTML结构全错了：
<body onload="initialize()">
<div id="map_canvas" style="width:90%; height:100%"></div>
</body>
</html>
<html>
<head>
</head>
<body>
</body>
</html>
shouldn't that just be
不应该只是
<body onload="initialize()">
<div id="map_canvas" style="width:90%; height:100%"></div>
</body>
</html>
回答by Francisco Valdez
You should put all your code within the initialize function:
您应该将所有代码放在 initialize 函数中：
<script type="text/javascript">
var poly;
var map;
function initialize() {
var latlng = new google.maps.LatLng(38.698044, -77.210411);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//map is already declared
//var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
var path = new MVCArray;
// every time the path is updated, automatically the map will update the polyline
poly.setPath(path);
$.getJSON('json.php', function(data) {
//var items = [];
$.each(data, function(key, val) {
path.push(new google.maps.LatLng(val.lat, val.longi));
});
});
var myOptions = {
zoom: 12,
//center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
}
</script>
回答by tony gil
to populate a javascript array from a mysql database (the rest, as i've seen, you know how to do):
从 mysql 数据库填充 javascript 数组（其余的，正如我所见，您知道该怎么做）：
<?php
//replace this to load from database
// populate array
for($j=0;$j<10;$j++){
$arrayData[$j] = $j*3;
}
?>
<script language="javascript" type="text/javascript">
<!--
var myArray = new Array();
<?php
//populate JS array
for($i=0;$i<10;$i++){
?>
myArray[<?php echo $i;?>]="<?php echo $arrayData[$i];?>";
<?php }?>
-->
</script>
if you want to run this and test it, just include the proper html head tags before the script and this afterwards (you would obviously remove end script and begin script tags -for style)
如果您想运行并测试它，只需在脚本之前和之后包含正确的 html head 标签（您显然会删除结束脚本并开始脚本标签 - 用于样式）
<script language="javascript" type="text/javascript">
<!--
function showData(){
for (var i=0;i<myArray.length;i++){
document.getElementById('output').innerHTML += "array position: "+i+" array content: "+myArray[i]+"<br>";
}
}
-->
</script>
</head>
<body onLoad="showData();">
<div id="output"></div>
</body>
</html>
