Google map api v3从数组中添加多义线 [英] Google map api v3 add polylines from array
本文介绍了Google map api v3从数组中添加多义线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图从数组中添加一组多行到Google地图。
以下是我的代码：
<！DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/>
< style type =text / css>
html {height：90％}
body {height：90％;保证金：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;
函数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）;
$ b 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。地形
};
< / script>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js>< / script>
< / head>
< body onload =initialize（）>
< div id =map_canvasstyle =width：90％; height：100％>< / div>
< / body>
< / html>
< html>
< head>
< / head>
< body>
< / body>
< / html>
有关线路path.push（新的google.maps.LatLng（val.lat， val.longi））;是不是添加数据？
或者有更好的方式来循环数据吗？
data 的内容，将数组添加到数组中，
path 解决方案 c $ c> ....然后，什么？据我所知，没有什么。假设你想用这个路径数组为你的折线设置路径。 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））;
}）;
//现在更新要使用的折线这条路径
poly.setPath（path）;
}）;
PS：您的HTML结构都是错误的：
< body onload =initialize（）>
< div id =map_canvasstyle =width：90％; height：100％>< / div>
< / body>
< / html>
< html>
< head>
< / head>
< body>
< / body>
< / html>
不应该只是
< body onload =initialize（）>
< div id =map_canvasstyle =width：90％; height：100％>< / div>
< / body>
< / html>
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?
Or is there a better way for me to loop the data in?
解决方案 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.
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:
<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>
这篇关于Google map api v3从数组中添加多义线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
