javascript - 在谷歌地图 API javascript 中从 map (使用绘图管理器)获取所有折线

Question

如何获取使用绘图管理器创建的所有折线？我无法使用DrawingManager事件监听器，因为插入的折线是可编辑的(DrawingManager中的事件监听器只能在第一次插入后工作)。
并且可以绘制多条折线。

这是我的代码

function initMap(){

        //set center coordinate
        var myLat= /*value*/;
        var myLng= /*value*/;
        var center= {lat:myLat, lng:myLng};

        //create map
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 16,
            center: center
        });

        addDrawingControl(map);
    }

  function addDrawingControl(map){
        //add drawing control
        var drawingControl = new google.maps.drawing.DrawingManager(
        {
            drawingMode : null,
            drawingControl : true,
            drawingControlOptions :{
                position : google.maps.ControlPosition.TOP_CENTER,
                drawingModes : [
                google.maps.drawing.OverlayType.POLYLINE
                ]
            },
            polylineOptions : {
                editable:true,
                draggable:false,
                geodesic:true
            }
        });
        drawingControl.setMap(map);
        //end of add drawing control

        //add event listener
        google.maps.event.addListener(drawingControl, 'polylinecomplete', function(polyline){
                var polylinePath = polyline.getPath();
                console.log("polyline : "+polylinePath.getArray());                 
        });
    }

Answer 1

保留对折线的引用。

var polylines = []; // array in the global scope

在polylinecomplete 事件上，将对折线的引用添加到数组中。

//add event listener
google.maps.event.addListener(drawingControl, 'polylinecomplete', function(polyline) {
  polylines.push(polyline);
});

当您想要捕获数据时，迭代数组以检索折线的当前状态。

google.maps.event.addDomListener(document.getElementById('btn'), 'click', function() {
  var htmlStr = "";
  for (var i = 0; i < polylines.length; i++) {
    htmlStr += "polyline #" + i + " # vertices=" + polylines[i].getPath().getLength() + " length=" + google.maps.geometry.spherical.computeLength(polylines[i].getPath()).toFixed(2) + " km<br>";
    for (var j = 0; j < +polylines[i].getPath().getLength(); j++) {
      htmlStr += "&nbsp;&nbsp;" + polylines[i].getPath().getAt(j).toUrlValue(6) + "<br>";
    }
  }
  document.getElementById('output').innerHTML = htmlStr;
});

proof of concept fiddle

代码片段:

var polylines = [];

function initMap() {
  //set center coordinate
  var myLat = 42;
  var myLng = -72;
  var center = {
    lat: myLat,
    lng: myLng
  };

  //create map
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: center
  });

  addDrawingControl(map);
}

function addDrawingControl(map) {
  //add drawing control
  var drawingControl = new google.maps.drawing.DrawingManager({
    drawingMode: null,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.POLYLINE
      ]
    },
    polylineOptions: {
      editable: true,
      draggable: false,
      geodesic: true
    }
  });
  drawingControl.setMap(map);
  //end of add drawing control

  //add event listener
  google.maps.event.addListener(drawingControl, 'polylinecomplete', function(polyline) {
    polylines.push(polyline);
    var polylinePath = polyline.getPath();
    console.log("polyline : " + polylinePath.getArray());
  });
  google.maps.event.addDomListener(document.getElementById('btn'), 'click', function() {
    var htmlStr = "";
    for (var i = 0; i < polylines.length; i++) {
      htmlStr += "polyline #" + i + " # vertices=" + polylines[i].getPath().getLength() + " length=" + google.maps.geometry.spherical.computeLength(polylines[i].getPath()).toFixed(2) + " km<br>";
      for (var j = 0; j < +polylines[i].getPath().getLength(); j++) {
        htmlStr += "&nbsp;&nbsp;" + polylines[i].getPath().getAt(j).toUrlValue(6) + "<br>";
      }
    }
    document.getElementById('output').innerHTML = htmlStr;
  })
}
google.maps.event.addDomListener(window, "load", initMap);

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

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<input id="btn" value="get polyline data" type="button" />
<div id="output"></div>
<div id="map"></div>