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

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

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

如何通过使用“绘图工具”工具栏上的一个绘图工具来获得刚绘制的形状的LatLng?

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

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

有几种方法可以获取您在地图上绘制的形状的坐标。专门针对多边形,您可以像这样向地图添加事件监听器。最简单的方法是在多边形绘制完成时向地图添加事件侦听器。

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/

这是我的消息来源:

编辑

我见过人们保存数据的另一种方法是在地图上添加事件侦听器以获取GeoJSON数据,这是用于保存图形数据的标准格式。

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

本文链接:https://www.f2er.com/3165459.html

大家都在问