ändern Bei dem Klicken

Question

Hier ist, wie meine Website derzeit aussieht: https://gyazo.com/ee7851e912a1b7fb4118f80ad0f35a53

Es zeigt die Auslieferungsfahrer auf der linken Seite und der Lieferroute für den ersten Treiber. Ich möchte in der Lage sein, auf einen der anderen Treiber zu klicken und deren Lieferungsroute anzuzeigen. Hier ist der HTML ich zur Zeit für jeden Fahrer haben:

<li onclick="changeDelivery(54.35024,-6.26928,54.38252,-6.30836);"> 
      <!-- driver info --> 
     </li> 

Und hier ist mein javascript:

function initMap() { 
var pickup = {lat: 54.34633, lng: -6.27175}; 
var dropoff = {lat: 54.34786, lng: -6.25146}; 

var map = new google.maps.Map(document.getElementById('map'), { 
    center: pickup, 
    scrollwheel: true, 
    zoom: 7, 
    disableDefaultUI: true, 
}); 

var directionsDisplay = new google.maps.DirectionsRenderer({ 
    map: map, 
    suppressMarkers: true, 
    polylineOptions: { 
     strokeColor: "#24A4EA", 
     strokeWeight: 5 
    } 
}); 

// Set destination, origin and travel mode. 
var request = { 
    destination: dropoff, 
    origin: pickup, 
    travelMode: google.maps.TravelMode.DRIVING 
}; 

// Pass the directions request to the directions service. 
var directionsService = new google.maps.DirectionsService(); 
    directionsService.route(request, function(response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      // Display the route on the map. 
      directionsDisplay.setDirections(response); 
     } 
}); 

var pickupIcon = new google.maps.MarkerImage('img/pickup-icon.png'); 
var dropoffIcon = new google.maps.MarkerImage('img/dropoff-icon.png'); 

var pickupMarker = new google.maps.Marker({ 
    position: pickup, 
    map: map, 
    icon: pickupIcon 
}); 

var dropoffMarker = new google.maps.Marker({ 
    position: dropoff, 
    map: map, 
    icon: dropoffIcon 
}); 
} 

google.maps.event.addDomListener(window, 'load', initMap); 

function changeDelivery(pickupLat,pickupLng,dropoffLat,dropoffLng) { 
    var pickup = {lat: pickupLat, lng: pickupLng}; 
    var dropoff = {lat: dropoffLat, lng: dropoffLng}; 
} 

Im Moment versuche ich, indem Sie auf den Listeneintrag die Funktion changeDelivery zu erhalten rufen und erwartet die Parameter davon, um die Abhol- und Absetzmarkierungen auf der Karte zu den neuen Koordinaten zu aktualisieren. Aus irgendeinem Grund funktioniert das nicht oder wie soll ich das machen?

Danke, Jamie

Answer 1

Ihre changeDelivery() ist die Karte überhaupt noch nicht zu manipulieren. Sie müssen den aktuellen Marker mit pickupMarker.setMap(null) entfernen, und dropoffMarker.setMap(null), setzte dann die neuen Standorte in die Marker mit pickupMarker.setMap(pickup) und dropoffMarker.setMap(dropoff)

https://developers.google.com/maps/documentation/javascript/markers#add