在 Google Maps JavaScript API 中绘制多条折线

Question

我发布这个问题是因为我发现的大多数问题都没有真正回答我的问题，我终于想通了。希望这对其他人有所帮助，以便更快地解决问题。

-编辑- 我已经编辑了这个问题，希望它对遇到这个问题的人更有用。

-问题- 我在将多条折线加载到谷歌地图时遇到问题。我尝试将数组传递给新的google.maps.Polyline函数，如下所示;

var flightPlanCoordinates = [
{ lat: 41.7171899900261, lng: -85.002969973285587 },
{ lat: 41.716339720601695, lng: -85.00356011920411 },
];
var flightPlanCoordinates2 = [
{ lat: 44, lng: -89 },
{ lat: 49, lng: -89 },
];
var arrayOfFlightPlans = [flightPlanCoordinates, flightPlanCoordinates2];
var flightPath = new google.maps.Polyline({
path: arrayOfFlightPlans,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 4,
});
flightPath.setMap(map);

这不起作用并导致错误"无效值错误：在索引 0 处：不是 LatLng 或 LatLngLiteral：在属性 lat：不是数字">

我的下一次尝试涉及尝试如下 for 循环(请注意，lat lng 数组与上面的代码片段没有变化(;

for (let i = 0; i < 2; i++) {
var flightPath = new google.maps.Polyline({
path: arrayOfFlightPlans,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 4,
id: segID
});
}
flightPath.setMap(map);

这有效，但没有提供我希望的结果。纬度 lng 输出是我数组中的最后一组坐标。我做错了什么？循环不应该在 for 循环的每次迭代上建立一条新的折线吗？

Answer 1

var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 41.713, lng: -85.003},
zoom: 16
});
var flightPlanCoordinates = [
{ lat: 41.7171899900261, lng: -85.002969973285587 },
{ lat: 41.716339720601695, lng: -85.00356011920411 },
{ lat: 41.715420123340095, lng: -85.003969783778473 },
{ lat: 41.713850219112373, lng: -85.0043800221203 },
{ lat: 41.709869880890324, lng: -85.004809740676933 },
{ lat: 41.709570224086633, lng: -85.004860160268152 },
];
var flightPlanCoordinates2 = [
{ lat: 42, lng: -86 },
{ lat: 42, lng: -87},
{ lat: 42, lng: -88 },
{ lat: 43, lng: -88 },
{ lat: 44, lng: -89 },
{ lat: 49, lng: -89 },
];
var arrayOfFlightPlans = [flightPlanCoordinates, flightPlanCoordinates2];
//Loops through all polyline paths and draws each on the map.
for (let i = 0; i < 2; i++) {
var flightPath = new google.maps.Polyline({
path: arrayOfFlightPlans[i],
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 4,
});
flightPath.setMap(map);
}
}

建立坐标并将它们放入数组中。使用 for 循环，我们可以在每个循环上建立新的折线路径。我缺少的是，在 for 循环的末尾，每次都需要绘制路径，如下所示(一个公认的愚蠢错误，但直到今天早上上班我才注意到(。

flightPath.setMap(map);

-编辑- 为了提供进一步的解释，我的想法是，在 for 循环的每次迭代中，都会实例化一个新的 google.maps.Polyline 对象，我是对的，但这并不意味着在地图上绘制了一条新的折线。折线仅在发出 setMap(map( 命令时添加到地图中，如上面的代码所示。这意味着，如果我们想要数组中的每个元素的新折线，我们需要在循环的每次迭代中将每条折线添加到地图中。