Erhalten Sie alle Polylinien von Karte (mit Zeichnungsmanager) in googlemap api Javascript

Question

Wie bekomme ich alle Polylinien, die ich mit Zeichnungsmanager erstellte? Ich kann den DrawingManager-Ereignis-Listener nicht verwenden, da die eingefügte Polylinie editierbar ist (der Ereignis-Listener in DrawingManager kann nur funktionieren, nachdem er zum ersten Mal eingefügt wurde).
Und es ist möglich, mehr als eine Polylinie zu zeichnen.

Hier ist mein Code

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

Referenzen Halten Sie die Polylinien.

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

auf dem polylinecomplete Ereignis, einen Verweis auf die Polylinie in das Array hinzuzufügen.

Wenn Sie die Daten erfassen möchten, durchlaufen Sie das Array, um den aktuellen Status der Polylinie abzurufen.

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

Code-Schnipsel:

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>