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

Question

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

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

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

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

Answer 1

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

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

编辑

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

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