在Google地图上绘制多条多段线 [英] Plotting multiple polylines on Google Maps
问题描述
我是使用Javascript和谷歌地图进行编程的新手，所以这可能是一个非常简单的问题。我想在Google地图上绘制多条多段线。我编写的代码可以绘制线条，但它们都是连接而不是离散的。我尝试过实现我在这里找到的几种解决方案，但是地图根本不显示，否则它会和多段线仍然连接。查看附件中有缺陷结果的图片
I'm new to programming with Javascript and Google Maps so this may be a pretty simple question. I would like to plot multiple polylines on a Google Map. I have code written that draws the lines but they are all connected instead of discrete. I've tried implementing several solutions I found here but either the map doesn't display at all or else it does and the polylines are all still connected. See the attached image of the flawed result.
有没有人有任何建议来纠正这个问题？谢谢你的帮助。代码如下：
Does anyone have any suggestions to correct this problem? Thanks for your help. Code below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas
{
height: 90%;
margin: 5px;
padding: 1px;
}
</style>
</head>
<body>
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3"
type="text/javascript">
</script>
<script>
var map;
var trackLats = [ [ [ 14.735, -20.595 ], [ -13.913, 8.188 ] ],
[ [ -14.788, 20.562 ], [ 13.879, -8.230 ] ],
[ [ 14.784, -20.546 ], [ -13.818, 8.288 ] ],
[ [ -14.837, 20.513 ], [ 13.784, -8.329 ] ],
[ [ 14.892, -20.439 ], [ -13.758, 8.350 ] ] ];
var trackLons = [ [ [ 76.480, 90.967 ], [ 68.509, 98.386 ] ],
[ [ -115.254, -100.759 ], [ -123.226, -93.342 ] ],
[ [ 53.036, 67.521 ], [ 45.065, 74.937 ] ],
[ [ -138.698, -124.204 ], [ -146.669, -116.791 ] ],
[ [ 29.567, 44.049 ], [ 21.570, 51.438 ] ] ];
function initialize()
{
var mapCenter = new google.maps.LatLng(0.0, 139.0);
var mapOptions =
{
zoom: 2,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var trackCoords = new google.maps.MVCArray;
var i, j, k;
for ( i=0 ; i<5 ; i++ )
{
for ( j=0 ; j<2 ; j++ )
{
for ( k=0 ; k<2 ; k++ )
{
trackCoords.push(new google.maps.LatLng(trackLats[i][j][k],
trackLons[i][j][k]));
}
var trackLine = new google.maps.Polyline(
{
map: map,
path: trackCoords,
geodesic: true,
strokeColor: '#FFFFFF',
strokeOpacity: 0.1,
strokeWeight: 3
});
trackCoords.clear;
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
推荐答案
我想你想要：
< a href =http://jsfiddle.net/dc8rbve9/2/ =nofollow>工作小提琴
每对坐标定义一个单线段。
在绘制每条线段后，开始一个新的点阵和一个新的google.maps.Polyline。
Each pair of coordinates defines a single line segment. After drawing each line segment, start a new array of points and a new google.maps.Polyline.
工作代码片段：
var map;
var trackLine = [];
var trackLats = [
[
[14.735, -20.595],
[-13.913, 8.188]
],
[
[-14.788, 20.562],
[13.879, -8.230]
],
[
[14.784, -20.546],
[-13.818, 8.288]
],
[
[-14.837, 20.513],
[13.784, -8.329]
],
[
[14.892, -20.439],
[-13.758, 8.350]
]
];
var trackLons = [
[
[76.480, 90.967],
[68.509, 98.386]
],
[
[-115.254, -100.759],
[-123.226, -93.342]
],
[
[53.036, 67.521],
[45.065, 74.937]
],
[
[-138.698, -124.204],
[-146.669, -116.791]
],
[
[29.567, 44.049],
[21.570, 51.438]
]
];
function initialize() {
var mapCenter = new google.maps.LatLng(0.0, 139.0);
var mapOptions = {
zoom: 1,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var trackCoords = new google.maps.MVCArray;
var i, j, k;
for (i = 0; i < 5; i++) {
for (j = 0; j < 2; j++) {
trackCoords = [];
for (k = 0; k < 2; k++) {
trackCoords.push(new google.maps.LatLng(trackLats[i][j][k],
trackLons[i][j][k]));
}
trackLine.push(new google.maps.Polyline({
map: map,
path: trackCoords,
geodesic: true,
strokeColor: '#FFFFFF',
strokeOpacity: 0.4,
strokeWeight: 3
}));
trackCoords.clear;
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 90%;
margin: 5px;
padding: 1px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>
这篇关于在Google地图上绘制多条多段线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
