Wie aktualisiere ich die Polylinie (entferne die vorherige von der Karte), indem ich einen Marker ziehe, der den Pfad ändert?

Question

Ich bin ziemlich neu in JavaScript und Google Maps API und ich habe verschiedene Variationen dieser Frage gesehen, aber ich kann keine der Lösungen für meinen Code anwenden, und ich bin nicht sicher warum. Da die Polylinie innerhalb der Funktion definiert ist, sollte sie nicht jedes Mal neu definiert werden, wenn die Funktion aufgerufen wird, wodurch die vorherige entfernt wird. Oder fehlt mir etwas? Was kann ich tun, um die "alte" Polylinie zu entfernen, wenn der Marker gezogen wird?

Hier ist mein Code: https://jsfiddle.net/emvee/qqavw3gh/6/

Die entsprechenden Codezeilen sind Zeilen 44-53 (die Ereignisse für, wenn die Markierung gezogen wird und in dem Prozess gezogen zu werden) und Linien 171-215, die das ist Funktion, die die Polylinie definiert und zeichnet, basierend auf Richtungen, die sie von directionsService erhält.

//map details, i.e. creates a map of Lucca 
var mapOptions = { 
    center: new google.maps.LatLng(43.8430, 10.5050), 
    zoom: 15, 
    mapTypeId: google.maps.MapTypeId.SATELLITE 
}; 

//create map 
var map = new google.maps.Map(document.getElementById('map'), mapOptions); 

//marker details 
var markerOptions1 = { 
    position: new google.maps.LatLng(43.8402250, 10.5008083) 
}; 
var markerOptions2 = { 
    position: new google.maps.LatLng(43.83811, 10.50328) 
}; 
var markerOptions3 = { 
    position: new google.maps.LatLng(43.8439194, 10.5032083) 
}; 
var markerOptions4 = { 
    position: new google.maps.LatLng(43.8405167, 10.5038722) 
}; 

//creates markers 
var marker1 = new google.maps.Marker(markerOptions1); 
var marker2 = new google.maps.Marker(markerOptions2); 
var marker3 = new google.maps.Marker(markerOptions3); 
var marker4 = new google.maps.Marker(markerOptions4); 

//Draggable marker for the start of pathing 
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'; 

var startMarkerOptions = { 
    position: new google.maps.LatLng(43.8376806, 10.5060250), 
    map: map, 
    draggable: true, 
    title: "Drag me to your current locaton!", 
    icon: image 
} 

var startMarker = new google.maps.Marker(startMarkerOptions); 

google.maps.event.addListener(startMarker, 'dragend', function(evt) { 
    console.log("Marker dropped."); 
    console.log(evt.latLng.lat().toFixed(3)); 
    console.log(evt.latLng.lng().toFixed(3)); 
    calcRoute(); 
}); 

google.maps.event.addListener(startMarker, 'dragstart', function(evt) { 
    console.log("marker is being dragged"); 
}); 

//sets markers 
marker1.setMap(map); 
marker2.setMap(map); 
marker3.setMap(map); 
marker4.setMap(map); 

//content string for infoWindows 
var contentString1 = '<div id="content">' + 
    '<div id="siteNotice">' + 
    '</div>' + 
    '<h1 id="firstHeading" class="firstHeading">Via della Caserma alleyway</h1>' + 
    '<div id="bodyContent">' + 
    '<img src="http://i.imgur.com/4veClkp.jpg" width="100" height="150" />' + 
    '<img src="http://i.imgur.com/cUIGkWD.jpg" alt="alleyway1" width="150" height="100" />' + 
    '<img src="http://i.imgur.com/wYokWoy.jpg" alt="3headstencil" width="100" height="136" />' + 
    '<img src="http://i.imgur.com/UKI1Hmf.jpg" alt="resTU2" width="150" height="100" />' + 
    '<img src="http://i.imgur.com/fhN88hs.jpg" alt="alleyway2" width="100" height="150" />' + 
    '</div>' + 
    '</div>'; 

var contentString2 = '<div id="content">' + 
    '<div id="siteNotice">' + 
    '</div>' + 
    '<h1 id="firstHeading" class="firstHeading">Various Artists on Legal Walls</h1>' + 
    '<div id="bodyContent">' + 
    '<img src="http://i.imgur.com/hWt5kD1.jpg" width="150" height="100" />' + 
    '<img src="http://i.imgur.com/Syedh0I.jpg" width="150" height="100" />' + 
    '<img src="http://i.imgur.com/poNqEaq.jpg" width="150" height="100" />' + 
    '<img src="http://i.imgur.com/pOZxM0p.jpg" width="150" height="100" />' + 
    '<img src="http://i.imgur.com/1kAlmlk.jpg" width="150" height="100" />' + 
    '<img src="http://i.imgur.com/eQkWHgl.jpg" width="150" height="100" />' + 
    '<img src="http://i.imgur.com/TGvXhcV.jpg" width="150" height="100" />' + 
    '<img src="http://i.imgur.com/NrJd1Tn.jpg" width="150" height="100" />' + 
    '<img src="http://i.imgur.com/hxfBhl7.jpg" width="150" height="100" />' + 
    '<img src="http://i.imgur.com/4VUjHa1.jpg" width="150" height="100" />' + 
    '<img src="http://i.imgur.com/CL5EmVj.jpg" width="150" height="100" />' + 
    '<img src="http://i.imgur.com/buHkEfj.jpg" width="150" height="100" />' + 
    '<img src="http://i.imgur.com/KZIRQJL.jpg" width="150" height="100" />' + 
    '<img src="http://i.imgur.com/gOm3tNd.jpg" width="150" height="100" />' + 
    '</div>' + 
    '</div>'; 

var contentString3 = '<div id="content">' + 
    '<div id="siteNotice">' + 
    '</div>' + 
    '<h1 id="firstHeading" class="firstHeading">Octopus on Via Buia</h1>' + 
    '<div id="bodyContent">' + 
    '<img src="http://i.imgur.com/0tOabHO.jpg" alt="Test Image" width="100" height="150" />' 
'</div>' + 
'</div>'; 


//marker info windows 
var infoWindowOptions1 = { 
    content: contentString1 
}; 

var infoWindowOptions2 = { 
    content: contentString2 
}; 

var infoWindowOptions3 = { 
    content: contentString3 
}; 

var infoWindowOptions4 = { 
    content: 'Resta and Various Artists' 
}; 

//Events for clicking on the markers 
var infoWindow1 = new google.maps.InfoWindow(infoWindowOptions1); 
google.maps.event.addListener(marker1, 'click', function(e) { 
    infoWindow1.open(map, marker1); 
}); 

var infoWindow2 = new google.maps.InfoWindow(infoWindowOptions2); 
google.maps.event.addListener(marker2, 'click', function(e) { 
    infoWindow2.open(map, marker2); 
}); 

var infoWindow3 = new google.maps.InfoWindow(infoWindowOptions3); 
google.maps.event.addListener(marker3, 'click', function(e) { 
    infoWindow3.open(map, marker3); 
}); 

var infoWindow4 = new google.maps.InfoWindow(infoWindowOptions4); 
google.maps.event.addListener(marker4, 'click', function(e) { 
    infoWindow4.open(map, marker4); 
}); 


var directionsService = new google.maps.DirectionsService(); 

var waypts = []; 

stop = new google.maps.LatLng(43.8402250, 10.5008083) 
waypts.push({ 
    location: stop, 
    stopover: true 
}); 
stop = new google.maps.LatLng(43.83811, 10.50328) 
waypts.push({ 
    location: stop, 
    stopover: true 
}); 
stop = new google.maps.LatLng(43.8439194, 10.5032083) 
waypts.push({ 
    location: stop, 
    stopover: true 
}); 
stop = new google.maps.LatLng(43.8405167, 10.5038722) 
waypts.push({ 
    location: stop, 
    stopover: true 
}); 

function calcRoute() { 

    start = startMarker.getPosition(); 
    end = startMarker.getPosition(); 

    var request = { 
    origin: start, 
    destination: end, 
    waypoints: waypts, 
    optimizeWaypoints: true, 
    travelMode: google.maps.DirectionsTravelMode.WALKING 
    }; 

    var bounds = new google.maps.LatLngBounds(); 

    var poly = new google.maps.Polyline({ 
    path: [], 
    strokeColor: "#58FA58", 
    strokeOpacity: 1.0, 
    strokeWeight: 3 
    }); 

    directionsService.route(request, function(response, status) { 
    //console.log(response.routes[0].legs); 
    if (status == google.maps.DirectionsStatus.OK) { 
     var legs = response.routes[0].legs; 
     for (i = 0; i < legs.length; i++) { 
     var steps = legs[i].steps; 
     for (j = 0; j < steps.length; j++) { 
      //console.log(steps[j].instructions); 
      var nextSegment = steps[j].path; 
      for (k = 0; k < nextSegment.length; k++) { 
      poly.getPath().push(nextSegment[k]); 
      bounds.extend(nextSegment[k]); 
      } 
     } 
     } 
    } else { 
     alert("Something went wrong" + status); 
    } 
    }); 

    poly.setMap(map); 
    //poly.setPath([]); why does this not work? 
} 

calcRoute(); 

Answer 1

die Polylinie global machen, ist es von der Karte (setzen Sie seine map Eigenschaft auf null), bevor die neuen erstellen (sobald Sie die neuen erstellen, erhalten Sie Zugang zu verlieren, und wenn dies nicht der Fall global, es geht aus dem Geltungsbereich, wenn Sie die calcRoute-Funktion beenden).

if (poly && poly.setMap) poly.setMap(null); 
poly = new google.maps.Polyline({ 
    path: [], 
    strokeColor: "#58FA58", 
    strokeOpacity: 1.0, 
    strokeWeight: 3 
}); 

updated fiddle

Code-Schnipsel:

//map details, i.e. creates a map of Lucca 
 
var mapOptions = { 
 
    center: new google.maps.LatLng(43.8430, 10.5050), 
 
    zoom: 15, 
 
    mapTypeId: google.maps.MapTypeId.SATELLITE 
 
}; 
 
var poly; 
 

 

 
//create map 
 
var map = new google.maps.Map(document.getElementById('map'), mapOptions); 
 

 
//marker details 
 
var markerOptions1 = { 
 
    position: new google.maps.LatLng(43.8402250, 10.5008083) 
 
}; 
 
var markerOptions2 = { 
 
    position: new google.maps.LatLng(43.83811, 10.50328) 
 
}; 
 
var markerOptions3 = { 
 
    position: new google.maps.LatLng(43.8439194, 10.5032083) 
 
}; 
 
var markerOptions4 = { 
 
    position: new google.maps.LatLng(43.8405167, 10.5038722) 
 
}; 
 

 
//creates markers 
 
var marker1 = new google.maps.Marker(markerOptions1); 
 
var marker2 = new google.maps.Marker(markerOptions2); 
 
var marker3 = new google.maps.Marker(markerOptions3); 
 
var marker4 = new google.maps.Marker(markerOptions4); 
 

 
//Draggable marker for the start of pathing 
 
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'; 
 

 
var startMarkerOptions = { 
 
    position: new google.maps.LatLng(43.8376806, 10.5060250), 
 
    map: map, 
 
    draggable: true, 
 
    title: "Drag me to your current locaton!", 
 
    icon: image 
 
} 
 

 
var startMarker = new google.maps.Marker(startMarkerOptions); 
 

 
google.maps.event.addListener(startMarker, 'dragend', function(evt) { 
 
    console.log("Marker dropped."); 
 
    console.log(evt.latLng.lat().toFixed(3)); 
 
    console.log(evt.latLng.lng().toFixed(3)); 
 
    calcRoute(); 
 
}); 
 

 
google.maps.event.addListener(startMarker, 'dragstart', function(evt) { 
 
    console.log("marker is being dragged"); 
 
}); 
 

 
//update the marker's coordinates for the pathing 
 
/* 
 
    function markerCoords(startMarker){ 
 
google.maps.event.addListener(startMarker, 'dragend', function(evt){ 
 

 
    }); 
 

 
}); 
 

 
google.maps.event.addListener(startMarker, 'drag', function(evt){ 
 
    console.log("marker is being dragged"); 
 
}); */ 
 
//end of marker coordinate update 
 

 
//sets markers 
 
marker1.setMap(map); 
 
marker2.setMap(map); 
 
marker3.setMap(map); 
 
marker4.setMap(map); 
 

 
//content string for infoWindows 
 
var contentString1 = '<div id="content">' + 
 
    '<div id="siteNotice">' + 
 
    '</div>' + 
 
    '<h1 id="firstHeading" class="firstHeading">Via della Caserma alleyway</h1>' + 
 
    '<div id="bodyContent">' + 
 
    '<img src="http://i.imgur.com/4veClkp.jpg" width="100" height="150" />' + 
 
    '<img src="http://i.imgur.com/cUIGkWD.jpg" alt="alleyway1" width="150" height="100" />' + 
 
    '<img src="http://i.imgur.com/wYokWoy.jpg" alt="3headstencil" width="100" height="136" />' + 
 
    '<img src="http://i.imgur.com/UKI1Hmf.jpg" alt="resTU2" width="150" height="100" />' + 
 
    '<img src="http://i.imgur.com/fhN88hs.jpg" alt="alleyway2" width="100" height="150" />' + 
 
    '</div>' + 
 
    '</div>'; 
 

 
var contentString2 = '<div id="content">' + 
 
    '<div id="siteNotice">' + 
 
    '</div>' + 
 
    '<h1 id="firstHeading" class="firstHeading">Various Artists on Legal Walls</h1>' + 
 
    '<div id="bodyContent">' + 
 
    '<img src="http://i.imgur.com/hWt5kD1.jpg" width="150" height="100" />' + 
 
    '<img src="http://i.imgur.com/Syedh0I.jpg" width="150" height="100" />' + 
 
    '<img src="http://i.imgur.com/poNqEaq.jpg" width="150" height="100" />' + 
 
    '<img src="http://i.imgur.com/pOZxM0p.jpg" width="150" height="100" />' + 
 
    '<img src="http://i.imgur.com/1kAlmlk.jpg" width="150" height="100" />' + 
 
    '<img src="http://i.imgur.com/eQkWHgl.jpg" width="150" height="100" />' + 
 
    '<img src="http://i.imgur.com/TGvXhcV.jpg" width="150" height="100" />' + 
 
    '<img src="http://i.imgur.com/NrJd1Tn.jpg" width="150" height="100" />' + 
 
    '<img src="http://i.imgur.com/hxfBhl7.jpg" width="150" height="100" />' + 
 
    '<img src="http://i.imgur.com/4VUjHa1.jpg" width="150" height="100" />' + 
 
    '<img src="http://i.imgur.com/CL5EmVj.jpg" width="150" height="100" />' + 
 
    '<img src="http://i.imgur.com/buHkEfj.jpg" width="150" height="100" />' + 
 
    '<img src="http://i.imgur.com/KZIRQJL.jpg" width="150" height="100" />' + 
 
    '<img src="http://i.imgur.com/gOm3tNd.jpg" width="150" height="100" />' + 
 
    '</div>' + 
 
    '</div>'; 
 

 
var contentString3 = '<div id="content">' + 
 
    '<div id="siteNotice">' + 
 
    '</div>' + 
 
    '<h1 id="firstHeading" class="firstHeading">Octopus on Via Buia</h1>' + 
 
    '<div id="bodyContent">' + 
 
    '<img src="http://i.imgur.com/0tOabHO.jpg" alt="Test Image" width="100" height="150" />' 
 
'</div>' + 
 
'</div>'; 
 

 

 
//marker info windows 
 
var infoWindowOptions1 = { 
 
    content: contentString1 
 
}; 
 

 
var infoWindowOptions2 = { 
 
    content: contentString2 
 
}; 
 

 
var infoWindowOptions3 = { 
 
    content: contentString3 
 
}; 
 

 
var infoWindowOptions4 = { 
 
    content: 'Resta and Various Artists' 
 
}; 
 

 
//Events for clicking on the markers 
 
var infoWindow1 = new google.maps.InfoWindow(infoWindowOptions1); 
 
google.maps.event.addListener(marker1, 'click', function(e) { 
 
    infoWindow1.open(map, marker1); 
 
}); 
 

 
var infoWindow2 = new google.maps.InfoWindow(infoWindowOptions2); 
 
google.maps.event.addListener(marker2, 'click', function(e) { 
 
    infoWindow2.open(map, marker2); 
 
}); 
 

 
var infoWindow3 = new google.maps.InfoWindow(infoWindowOptions3); 
 
google.maps.event.addListener(marker3, 'click', function(e) { 
 
    infoWindow3.open(map, marker3); 
 
}); 
 

 
var infoWindow4 = new google.maps.InfoWindow(infoWindowOptions4); 
 
google.maps.event.addListener(marker4, 'click', function(e) { 
 
    infoWindow4.open(map, marker4); 
 
}); 
 

 

 
var directionsService = new google.maps.DirectionsService(); 
 

 
var waypts = []; 
 

 
stop = new google.maps.LatLng(43.8402250, 10.5008083) 
 
waypts.push({ 
 
    location: stop, 
 
    stopover: true 
 
}); 
 
stop = new google.maps.LatLng(43.83811, 10.50328) 
 
waypts.push({ 
 
    location: stop, 
 
    stopover: true 
 
}); 
 
stop = new google.maps.LatLng(43.8439194, 10.5032083) 
 
waypts.push({ 
 
    location: stop, 
 
    stopover: true 
 
}); 
 
stop = new google.maps.LatLng(43.8405167, 10.5038722) 
 
waypts.push({ 
 
    location: stop, 
 
    stopover: true 
 
}); 
 

 
function calcRoute() { 
 

 
    start = startMarker.getPosition(); 
 
    end = startMarker.getPosition(); 
 

 
    var request = { 
 
    origin: start, 
 
    destination: end, 
 
    waypoints: waypts, 
 
    optimizeWaypoints: true, 
 
    travelMode: google.maps.DirectionsTravelMode.WALKING 
 
    }; 
 

 
    var bounds = new google.maps.LatLngBounds(); 
 
    if (poly && poly.setMap) poly.setMap(null); 
 
    poly = new google.maps.Polyline({ 
 
    path: [], 
 
    strokeColor: "#58FA58", 
 
    strokeOpacity: 1.0, 
 
    strokeWeight: 3 
 
    }); 
 

 

 

 
    directionsService.route(request, function(response, status) { 
 
    //console.log(response.routes[0].legs); 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     var legs = response.routes[0].legs; 
 
     for (i = 0; i < legs.length; i++) { 
 
     var steps = legs[i].steps; 
 
     for (j = 0; j < steps.length; j++) { 
 
      //console.log(steps[j].instructions); 
 
      var nextSegment = steps[j].path; 
 
      for (k = 0; k < nextSegment.length; k++) { 
 
      poly.getPath().push(nextSegment[k]); 
 
      bounds.extend(nextSegment[k]); 
 
      } 
 
     } 
 
     } 
 
    } else { 
 
     alert("Something went wrong" + status); 
 
    } 
 
    }); 
 

 
    poly.setMap(map); 
 
    //poly.setPath([]); why does this not work? 
 
} 
 

 
calcRoute();

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

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<h1>Graffmap</h1> 
 
<hr/> 
 
<p> 
 
    Grab and drag the flag marker to indicate your starting position.</p> 
 
<hr/> 
 
<div id="map"></div>