在Google Maps JavaScript API中绘制多段线

我之所以发布这个问题，是因为我发现的大多数问题并没有真正回答我的问题，我最终找到了答案。希望这将有助于其他人更快地解决问题

-编辑- 我编辑了这个问题，希望它对任何遇到这个问题的人都更有用

-问题- 我在将多条多段线加载到谷歌地图时遇到问题。我已经尝试将数组传递给新的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);

这不起作用，并导致属性lat:非数字中的错误“索引0:非LatLng或LatLngLiteral:处的InvalidValueError:非LATL”

我的下一次尝试涉及如下所示的for循环（注意，latlng阵列没有从上面的代码片段更改）

for（设i=0；i<2；i++）{
var flightPath=new google.maps.Polyline({
路径：arrayOfFlightPlans，
测地线：正确，
strokeColor:“#FF0000”，
笔划不透明度：1.0，
冲程重量：4，
id:segID
});
}
flightPath.setMap（map）；

这是有效的，但没有达到我所希望的效果。lat lng输出是我阵列中的最后一组坐标。我做错了什么？循环不应该在for循环的每次迭代中建立新的多段线吗

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循环的每次迭代中，都会实例化一个新的google.maps.Polyline对象，我是正确的，但这并不意味着在地图上绘制一条新的多段线。只有在发出setMap（map）命令时，才会将多段线添加到地图中，如上面的代码所示。这意味着，如果我们想从数组中的每个元素中获得一条新的多段线，我们需要在循环的每次迭代中将每个多段线添加到映射中。

回答您自己的问题很好，但请努力更详细地解释问题和答案。您能提出一些建议来改进问题和答案吗？对我来说，这个问题似乎相当直截了当：如何绘制多段线？就我的回答而言，它与google提供的文档没有太大区别，我添加了第二组坐标、这些坐标的数组和一个for循环，其中包含文档中新的google.maps.Polyline命令。我的答案基本上是，将文档中的所有内容移动到for循环中，并提供多个坐标。我不是投反对票的人。你可以阅读来自百万分用户的建议，继续努力！我希望人们能解释他们的反对票。没有解释的否决票是没有多大帮助的。我已经更新了问题和答案，希望能让它们变得更好。谢谢你的建议。

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);
    }
}

flightPath.setMap(map);