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

【问题标题】：How to draw a polygon in google map using many coordinates如何使用多个坐标在谷歌地图中绘制多边形
【发布时间】：2017-12-16 19:04:24
【问题描述】：

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

任何人都可以请帮助或向我推荐任何可以创建多边形而无需线与线相交的教程。

谢谢。

【问题讨论】：

你说的是this example？因为如果是这样，只需在 chords 数组中添加更多坐标。
@m.nachury，是的，如果我添加更多坐标，那么就会出现交叉线。
@S S 然后我认为您的坐标有问题，即使有 20 个坐标，它对我来说也能正常工作。你能给我一个你的坐标的例子吗？我觉得你不应该把它们都寄出去……
@m.nachury jsfiddle.net/e0L9g38a 你能看这里吗。有越线。好吧，我想知道如何对这些坐标进行排序，以免线条交叉
为您编辑了正确的答案

标签： php google-maps google-maps-api-3

【解决方案1】：

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

算法有javascript实现：
https://github.com/brian3kb/graham_scan_js

上面的 repo 还提供了一个如何使用 Google 地图实现此功能的示例：
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
});

【讨论】：

【解决方案2】：

只要把你拿走的example 加到更多积分上。

但是，超过三个点，如果你没有正确排序坐标，你会遇到交叉问题。

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

这是答案：Sorting points to avoid intersections。

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

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

对于这个比例，您可以将坐标投影到二维平面。

去这个：merkator projection

【讨论】：