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

Question

I got the Google Map and Drawing Tools displayed on the map. I can draw the shapes (circle, polygon, rectangle...) on the map. For the start I am using the example code from Google Maps JavaScript get started page: https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples/drawing-tools

I was able to find a lot of examples on have to draw/make a shape object by providing all the properties and LatLng.

How do I get a LatLng for the shape that I just draw by using one of the drawing tools form Drawing Tools toolbar?

I am planing to make an application which will allow user to draw shapes on the map and save the LatLng in to database (i will be using MySql), so later the shape can be displayed again on the map as per request. Please help.

Answer 1

There are a few ways to get the coordinates of the shapes you draw on the map. Specifically for polygons you can add an event listener to the map like so. The easiest way is to add an event listener to the map for when a polygon is finished drawing.

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
});

Each type of drawing has a different format for saving so for something like circles you'd do

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

  // Save circle here
});

You also have the option of adding an event to listen for all of the events by listening to the overlaycomplete event but in that case you'd have to handle the different types inside the event.

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
  }
});

Here's an example: https://jsfiddle.net/juop8q3n/1/

And here's my sources:

• 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

EDIT

Another way I've seen people save the data is by adding an event listener to the map to get the GeoJSON data, which is a standard format for saving drawing data.

Link: http://jsfiddle.net/y89rbfLo/