获取在Google地图上绘制的所有多边形线 -

Question

我正在使用Google地图。

我遇到一种情况，即用户使用绘图工具在地图上输入路径。当用户停止绘制线时，我需要获取所有点的完整路径。

所以我在JavaScript中有这个代码：

  LoadDrawingToolsForDistance: function () {
        var drawingManager = new google.maps.drawing.DrawingManager({
            //drawingMode: google.maps.drawing.OverlayType.MARKER,
            drawingControl: true,
            drawingControlOptions: {
                position: google.maps.ControlPosition.TOP_CENTER,
                drawingModes: [
                  google.maps.drawing.OverlayType.POLYLINE
                ]
            },
            circleOptions: {
                fillColor: '#ffff00',
                fillOpacity: 1,
                strokeWeight: 5,
                clickable: false,
                editable: true,
                zIndex: 1
            },

        });
        drawingManager.setMap(MapObject);

        google.maps.event.addListener(drawingManager, 'polylinecomplete', function (event) {
            debugger;
            alert('A');
        });
    }

绘图工具工作正常。当线完成绘图时，即使我得到警报（＆＃39; a＆＃39;）。

这是函数中event参数的视图：

Answer 1

您只需使用overlaycomplete事件即可完成此操作。

<div id="map_canvas"></div>
  
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing">
</script>

<script type="text/javascript">

</script>

<style>
html, body, #map_canvas {
    margin: 0;
    padding: 0;
    height: 100%;
}
</style>
<script type="text/javascript">
  var map;
  function initialize() {
    var myOptions = {
      zoom: 8,
      center: new google.maps.LatLng(-37.84232584933157, 145.008544921875),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    
    map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

	 var drawingManager = new google.maps.drawing.DrawingManager({
		    
		    drawingControl: true,
		    drawingControlOptions: {
		      position: google.maps.ControlPosition.TOP_RIGHT,
		      drawingModes: [
                google.maps.drawing.OverlayType.POLYGON,
		        google.maps.drawing.OverlayType.POLYLINE
		      ]
		    },
	    polygonOptions: {
	    	strokeColor: '#75ad3e',
	        fillColor: '#75ad3e',
	        fillOpacity: 0.35,
	        strokeWeight: 2,
	        clickable: true,
	        editable: true,
	        draggable:true
	      }
	});
    	drawingManager.setMap(map);
    	
    	google.maps.event.addListener(drawingManager, 'overlaycomplete', function (OverlayCompleteEvent) {
    		var bounds = OverlayCompleteEvent.overlay.getPath().getArray();
    		console.log(bounds);
          alert(bounds.toString());

    		 });

    	}


  google.maps.event.addDomListener(window, 'load', initialize);
</script>

Answer 2

要在地图上检索折线的点，您可以使用此

google.maps.event.addListener(drawingManager, 'polylinecomplete', function (event) {
   console.log(event.getPath().getArray());
});

这将打印出折线中的所有点。