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

【问题标题】：Drawing Multiple Polylines in Google Maps JavaScript API在 Google Maps JavaScript API 中绘制多条折线
【发布时间】：2018-05-14 23:11:15
【问题描述】：

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

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

-问题- 我无法将多条折线加载到谷歌地图中。我尝试将数组传递给新的 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);

这不起作用并导致错误“InvalidValueError: at index 0: not a LatLng or LatLngLiteral: in property lat: not a number”

我的下一次尝试涉及尝试如下的 for 循环（注意 lat lng 数组与上面的代码 sn-p 没有变化）；

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

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

【问题讨论】：

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

标签： javascript google-maps-api-3 google-polyline

【解决方案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) 命令时，折线才会添加到地图中，如上面的代码所示。这意味着，如果我们想要从数组中的每个元素创建一条新的折线，我们需要在循环的每次迭代中将每条折线添加到地图中。

【讨论】：