javascript - 获取在谷歌地图上绘制的折线的所有点 -

Question

我正在研究 Google map 。

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

所以我在 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');
        });
    }

绘图工具工作正常。即使我得到 alert('a') 也会在线条完成绘制时显示。

这是函数中event参数的View:

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>