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

Question

我有一个包含谷歌地图中显示的不同位置的纬度和经度的数组。现在我需要让多边形穿过所有这些点。我在google apis中找到了很好的教程，但这个例子只适用于3分。

任何人都可以帮助或推荐我任何可以创建多边形而不会在线之间相交的教程。

谢谢。

Answer 1

只需拿走你所带的example并添加更多积分。

然而，如果您没有正确排序坐标，如果超过三个点，您就会遇到交叉问题。

要修复它，您需要一个算法：

以下是答案：Sorting points to avoid intersections。

你可以在答案的第二点停下来，你只需计算多边形的中心，然后计算角度的分数。

但是，您无法使用此算法使用纬度和经度。

对于此比例，您可以将坐标投影到2d平面。

转到此：merkator projection

Answer 2

您可以使用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
});