如何在谷歌地图上使用多个坐标绘制多边形

Question

我有一个包含不同位置的纬度和经度数组，这些位置在Google地图上显示。现在我需要创建一个通过所有这些点的多边形。我已经在Google APIs中找到了很好的教程，但是那个示例只适用于3个点。请问是否有人能够帮忙或引荐一个可以创建多边形而不相交的教程？

谢谢。

- S S

---

你是在谈论这个例子吗？如果是的话，只需在chords数组中添加更多坐标即可。 - m.nachury

@m.nachury，是的，如果我添加更多坐标，则会出现线交叉。 - S S

@S S 那我认为你的坐标有问题，即使有20个坐标，它对我来说都很好用。你能给我一个你的坐标的例子吗？我觉得你不应该全部发送它们... - m.nachury

@m.nachury，你能看一下这里吗？线条交叉了。我想知道如何对这些坐标进行排序，以便线条不会交叉。 - S S

给你编辑了一个合适的答案。 - m.nachury

Answer 1

你可以使用 Graham scan方法找到坐标点的凸包并将其传递给多边形。

这里有一个算法的javascript实现：
https://github.com/brian3kb/graham_scan_js

上述仓库还提供了一个如何在Google Maps中实现此算法的示例：
https://github.com/brian3kb/graham_scan_js/blob/master/example/app1.js

---

这是上述内容的基本实现：

function getConvexHullCoords(coords) {
    const convexHull = new ConvexHullGrahamScan();

    coords.forEach(item => {
        convexHull.addPoint(item.lng, item.lat);
    });

    return convexHull.getHull().map((item) => {
        return {
            lat: item.y,
            lng: item.x
        };
    });
}

const coords = [
    {lat: 37.772, lng: -122.214},
    {lat: 21.291, lng: -157.821},
    {lat: -18.142, lng: 178.431},
    {lat: -27.467, lng: 153.027}
];

new google.maps.Polygon({
    paths: [getConvexHullCoords(coords)],
    fillColor: '#000',
    fillOpacity: 0.5
});

- m.spyratos

Answer 2

只需使用您选择的示例并添加更多点即可。

然而，如果不正确排序坐标，则使用三个以上的点会出现交叉问题。

为了解决这个问题，您需要使用算法：

答案在这里：Sorting points to avoid intersections。

您可以在答案的第二个点停止，只需计算多边形的中心，然后计算角度以对点进行排序。

但是，此算法不能使用纬度和经度。

对于这种情况，您可以将坐标投影到2D平面上。

请参考：merkator projection。

- m.nachury