Есть ли способ получить значение координат полигона Google Maps в формате строки

Question

Вот как я рисую многоугольник.И я хочу, чтобы она получила нарисованную область многоугольника и отметила свойства на карте на следующей странице, которая находится под областью нарисованного многоугольника, а также нарисовала на ней многоугольник. Я получаю координаты многоугольника, но трудноотправьте координаты по ссылке на следующую страницу.

var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });

  var drawingManager = new google.maps.drawing.DrawingManager({
          drawingMode: google.maps.drawing.OverlayType.POLYGON,
          drawingControl: true,
          drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [ 'polygon']
          },
          markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'},
        polygonOptions: {
        editable: true
      }
        });

   google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {

   $.each(event.overlay.getPath().getArray(), function(key, latlng){
            var lat = latlng.lat();
            var lon = latlng.lng();
            console.log(lat, lon); 
            console.log(latlng); //do something with the coordinates
           lats.push({lat:lat,lon:lon});

        var latlng = {lat: parseFloat(lat), lng: parseFloat(lon)};
        geocoder.geocode({'location': latlng}, function(results, status) {
          if (status === 'OK') {
            if (results[0]) {

             var t = results[0].formatted_address.split(',');
             var country = t[t.length-1];
             var state = t[t.length-2];
             locations.push({'state':state,country:country});
           //  console.log(locations);
           //  console.log(lats);
              // locations.push({'state:'lat,lon});
            } else {
              window.alert('No results found');
            }
          } else {
            window.alert('Geocoder failed due to: ' + status);
          }
        });
        });

Answer 1

Я могу предложить использовать закодированные пути для отправки многоугольника в качестве строкового параметра в URL следующей страницы. Maps JavaScript API имеет библиотеку геометрии, которая позволяет кодировать и декодировать массив LatLng в строку:

https://developers.google.com/maps/documentation/javascript/reference/3/geometry#encoding

Вы можете использовать что-то вроде

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
    var encodedPath = google.maps.geometry.encoding.encodePath(event.overlay.getPath());
    window.open(m_url + "?path="+encodedPath, "restore polygon"); 
});

на странице с менеджером чертежей и восстановить массив LatLng на следующей странице как

let params = (new URL(document.location)).searchParams;
let encodedPath = params.get("path");

if (encodedPath) {
    var path = google.maps.geometry.encoding.decodePath(encodedPath);

    var polygon = new google.maps.Polygon({
        paths: path,
        map: map
    });
}

Подтверждение концепции

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });

  var drawingManager = new google.maps.drawing.DrawingManager({
      drawingMode: google.maps.drawing.OverlayType.POLYGON,
      drawingControl: true,
      drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: [ 'polygon']
      },
      markerOptions: {
          icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'},
      polygonOptions: {
          editable: true
      },
      map: map
  });

  google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
      var encodedPath = google.maps.geometry.encoding.encodePath(event.overlay.getPath());
      console.log(encodedPath);
      window.open("http://output.jsbin.com/hicomid?path="+encodedPath, "restore polygon"); 
  });


}

#map {
  height: 100%;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&libraries=drawing,geometry&callback=initMap"
    async defer></script>

Вы также можете проверить этот пример на jsfiddle: https://jsfiddle.net/xomena/tpvoL426/

Надеюсь, это поможет!