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/

我希望这会有所帮助！

有没有办法获取字符串格式的Google地图多边形坐标值

1 个答案: