使用 Google Maps 绘图工具绘制多边形时获取 Lat Lng

Question

我在地图上显示了 Google 地图和绘图工具。我可以在地图上绘制形状（圆形、多边形、矩形......）。首先，我使用 Google Maps JavaScript 入门页面中的示例代码：https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples/drawing-tools

通过提供所有属性和 LatLng，我能够找到很多关于必须绘制/制作形状对象的示例。

如何使用绘图工具工具栏上的绘图工具之一为刚绘制的形状获取 LatLng？

我打算制作一个应用程序，允许用户在地图上绘制形状并将 LatLng 保存到数据库中（我将使用 MySql），以便稍后可以根据请求在地图上再次显示形状。 请帮忙。

Answer 1

有几种方法可以获取您在地图上绘制的形状的坐标。特别是对于多边形，您可以像这样向地图添加事件侦听器。最简单的方法是在地图中添加一个事件监听器，用于多边形绘制完成。

google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
  const coords = polygon.getPath().getArray().map(coord => {
    return {
      lat: coord.lat(),
      lng: coord.lng()
    }
  });

  console.log(JSON.stringify(coords, null, 1));

  // SAVE COORDINATES HERE
});

每种类型的绘图都有不同的保存格式，所以对于像圆圈这样的东西你会做

google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {
  const radius = circle.getRadius();

  // Save circle here
});

您还可以通过侦听overlaycomplete 事件来添加一个事件来侦听所有事件，但在这种情况下，您必须处理事件中的不同类型。

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
  if (event.type == 'circle') {
    // Handle Circle using event.overlay
  }

  if (event.type == 'polygon') {
    // Handle Polygon using event.overlay
  }
});

这是一个例子： https://jsfiddle.net/juop8q3n/1/

这是我的资料来源：

• https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/drawinglayer#drawing_events
• https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/reference#drawing-on-the-map

编辑

我看到人们保存数据的另一种方法是向地图添加事件侦听器以获取 GeoJSON 数据，这是保存绘图数据的标准格式。

链接：http://jsfiddle.net/y89rbfLo/