Javascript 使用绘图管理器在谷歌地图上绘制矩形/多边形时获取其坐标

我发现了一个要点，它支持绘图工具，并提供了在谷歌地图上从几种颜色中进行选择的能力：

我正试图通过socket.io来利用这一点，这样多个人可以查看地图，当一个人在地图上画东西时，所有人都可以看到画的东西

我已经用记号笔记下了基本的想法

socket.emit("marker", e.overlay.position);

但是，当放置带有矩形、多边形和圆形的标记时，它似乎有点困难。当我用这些形状中的任何一个注销地图上的点击事件时，它返回的数据似乎比用marker返回的数据复杂得多，我找不到我需要向其他用户广播的点的坐标。有人知道在上面的要点中哪里可以找到这些吗

编辑：我已经能够用

e.overlay.j.center

编辑：我已经能够用e.overlay.j.center找到中心

在使用浏览器调试工具中可以看到的单字母属性时要非常小心。它们不是文档化的或静态的，并且会在没有警告的情况下更改

---

要回答实际问题-

e.overlay

的类型取决于您用什么初始化DrawingManager，请参阅文档。因此，如果您正在绘制多边形，

e.overlay

将是类型。然后，您可以使用

e.overlay.getPath（0）.getArray（）

获取组成该多边形的点，这将为您提供一个

LatLng

对象数组。（显然，循环所有可用路径，而不仅仅是

0

）

有一个很好的例子显示了基于覆盖返回的几何体类型的切换行为

编辑：我已经能够用e.overlay.j.center找到中心

在使用浏览器调试工具中可以看到的单字母属性时要非常小心。它们不是文档化的或静态的，并且会在没有警告的情况下更改

---

要回答实际问题-

e.overlay

的类型取决于您用什么初始化DrawingManager，请参阅文档。因此，如果您正在绘制多边形，

e.overlay

将是类型。然后，您可以使用

e.overlay.getPath（0）.getArray（）

获取组成该多边形的点，这将为您提供一个

LatLng

对象数组。（显然，循环所有可用路径，而不仅仅是

0

）

---

有一个很好的例子显示了基于覆盖返回的几何体类型的切换行为。

不建议使用这些类型的属性（

e.overlay.j

）因为它们不是供公众访问的，也不能保证它们不会在下一版本的Google Maps JavaScript API中更改

对于

google.maps.drawing.overlytype.RECTANGLE

和

google.maps.drawing.overlytype.CIRCLE

类型，可以使用

getBounds（）函数

确定当前形状的横向/横向边界，如下所示：

//get lat/lng bounds of the current shape
var bounds = e.overlay.getBounds();
var start = bounds.getNorthEast();
var end = bounds.getSouthWest();
var center = bounds.getCenter();

对于

google.maps.drawing.overlytype.POLYLINE

和

google.maps.drawing.overlytype.POLYGON

类型，可以使用

getPath（）函数

：

//get lat/lng array of the current shape
var locations = e.overlay.getPath().getArray()

修改示例

var绘图管理器；
变量选择形状；
变量颜色=['#1E90FF'、'#FF1493'、'#32CD32'、'#FF8C00'、'#4B0082']；
选择颜色；
var colorButtons={}；
函数{
如果（selectedShape）{
selectedShape.setEditable（false）；
selectedShape=null；
}
}
功能选择（形状）{
选举（）；
selectedShape=形状；
shape.setEditable（true）；
选择颜色（shape.get（'fillColor'）| | shape.get（'strokeColor'））；
}
函数deleteSelectedShape（）{
如果（selectedShape）{
selectedShape.setMap（空）；
}
}
功能选择颜色（颜色）{
selectedColor=颜色；
对于（变量i=0；igetCoords(someShape){
    const paths = someShape.getPath().getArray();
    const coords = paths.map((a) => [a.lat(), a.lng()]);
}