Google maps 谷歌地图-绘制多条单独的多段线

所以我试图在谷歌地图上画多条分开的多段线。 到目前为止，我没有这么多：

<script>
var center = new google.maps.LatLng(51.97559, 4.12565);
var map = new google.maps.Map(document.getElementById('map'), {
   center: center,
   zoom: 12,
   mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow({
    map: map
});  

var bounds = new google.maps.LatLngBounds();

// start coordinates
var start = ['51.97559, 4.12565', 
             '55.46242, 8.43872', 
             '49.49259, 0.1065',
             '50.36862, -4.13412']

// end coordinates
var end = ['51.94784, 1.2539', 
           '51.74784, 1.2539', 
           '50.79726, -1.11048',
           '43.45846, -3.80685']

function initialize() {
    for (var i=0; i < end.length; i++){
      calcRoute(start[i], end [i]);
    }
}

function calcRoute(source,destination){
  var polyline = new google.maps.Polyline({
     path: [],
     strokeColor: 'red',
     strokeWeight: 2,
     strokeOpacity: 1
  });

  polyline.setMap(map);          
}
</script>

var center=newgoogle.maps.LatLng（51.97559,4.12565）；
var map=new google.maps.map（document.getElementById（'map'）{
中心:中心,，
缩放：12，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var infowindow=new google.maps.infowindow({
地图：地图
});  
var bounds=new google.maps.LatLngBounds（）；
//起始坐标
var start=['51.97559,4.12565'，
'55.46242, 8.43872', 
'49.49259, 0.1065',
'50.36862, -4.13412']
//端坐标
var end=['51.94784,1.2539'，
'51.74784, 1.2539', 
'50.79726, -1.11048',
'43.45846, -3.80685']
函数初始化（）{
对于（变量i=0；i

我发现了一个有趣的例子，但它有方向TravelMode，我只想要两点之间的一条直线。 在我的例子中，我想在地图上画4条不相连的直线

一个google.maps.LatLng对象是两个数字；或者google.maps.LatLngLiteral是带有lat和lng属性的javascript对象，两者都不是字符串

代码片段：

var映射；
函数初始化（）{
var center=newgoogle.maps.LatLng（51.97559,4.12565）；
map=new google.maps.map（document.getElementById（'map'）{
中心:中心,，
缩放：12，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var infowindow=new google.maps.infowindow（{}）；
var bounds=new google.maps.LatLngBounds（）；
//起始坐标
var start=['51.97559,4.12565'，
'55.46242, 8.43872',
'49.49259, 0.1065',
'50.36862, -4.13412'
]
//端坐标
var end=['51.94784,1.2539'，
'51.74784, 1.2539',
'50.79726, -1.11048',
'43.45846, -3.80685'
]
对于（变量i=0；i
html，
身体，
#地图{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}

回答得很好

这是一个小小的改进，您可以将所有路径放在一个多边形对象中，而不是向地图中添加许多多段线元素（这可能以后需要您跟踪并迭代所有多段线元素以删除或更改它们）

工作小提琴：
（我拿起geocodezip的小提琴做了些小改动）


var地理编码器；
var映射；
函数初始化（）{
var center=newgoogle.maps.LatLng（51.97559,4.12565）；
map=new google.maps.map（document.getElementById（'map'）{
中心:中心,，
缩放：12，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var bounds=new google.maps.LatLngBounds（）；
//起始坐标
var start=['51.97559,4.12565'，
'55.46242, 8.43872',
'49.49259, 0.1065',
'50.36862, -4.13412'
];
//端坐标
var end=['51.94784,1.2539'，
'51.74784, 1.2539',
'50.79726, -1.11048',
'43.45846, -3.80685'
];
var路径=[]；
对于（变量i=0；i
html，
身体，
#地图{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}

您没有填充多段线的路径，我不知道应该填充什么：/例如，使用
源
和
目标
（不清楚预期结果应该是什么）
路径：[源，目标]
for (var i=0; i < end.length; i++){
  var startCoords = start[i].split(",");
  var startPt = new google.maps.LatLng(startCoords[0],startCoords[1]);
  var endCoords = end[i].split(",");
  var endPt = new google.maps.LatLng(endCoords[0],endCoords[1]);
  calcRoute(startPt, endPt);
  bounds.extend(startPt);
  bounds.extend(endPt);
}
map.fitBounds(bounds);

function calcRoute(source,destination){
  var polyline = new google.maps.Polyline({
     path: [source, destination],
     strokeColor: 'red',
     strokeWeight: 2,
     strokeOpacity: 1
  });

  polyline.setMap(map);          
}