Получить все полилинии с карты (с менеджером рисования) в googlemap api javascript

Question

Как я могу получить все полилинии, которые я создал с помощью менеджера чертежей? Я не могу использовать DrawingManager event listener, потому что вложенная полилиния доступна для редактирования (прослушиватель событий в 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"></script> 
 
<input id="btn" value="get polyline data" type="button" /> 
 
<div id="output"></div> 
 
<div id="map"></div>