谷歌地圖刪除以前的路線，並繪製一條新的路線

Question

目前我遇到一個問題。我使用並更改了示例API來繪製兩點的路線。 A點是當前位置。 B點是多個標記位置之一。這些標記被創建，我稱之爲附近的搜索功能。

function showInfoWindow() { 
    var marker = this; 
    places.getDetails({ 
      placeId: marker.placeResult.place_id 
     }, 
     function(place, status) { 
      if (status !== google.maps.places.PlacesServiceStatus.OK) { 
       return; 
      } 
      infoWindow.open(map, marker); 
      buildIWContent(place); 
     }); 
    var clickLat = marker.position.lat(); 
    var clickLon = marker.position.lng(); 
    var directionsDisplay = new google.maps.DirectionsRenderer({ 
     map: map 
    }); 
    var directionsService = new google.maps.DirectionsService(); 
    showRoute(clickLat, clickLon, directionsDisplay, directionsService); 
} 

function showRoute(clickLat, clickLon, directionsDisplay, directionsService) { 
    var pointA = { 
     lat: currentLat, 
     lng: currentLon 
    }; 
    var pointB = { 
     lat: clickLat, 
     lng: clickLon 
    }; 


    directionsDisplay.setOptions({ 
     suppressMarkers: true 
    }); 

    //directionsDisplay.setMap(map); 
    //directionsDisplay.setDirections({ routes: [] }); 
    // Set destination, origin and travel mode. 
    var request = { 
     destination: pointB, 
     origin: pointA, 
     travelMode: google.maps.TravelMode.DRIVING 
    }; 
    //directionsDisplay.setMap(null); 
    // Pass the directions request to the directions service. 
    directionsService.route(request, function(response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      // Display the route on the map. 
      //directionsDisplay.set('directions', null); 

      //directionsDisplay.setMap(map); 
      //directionsDisplay.setDirections({ routes: [] }); 
      directionsDisplay.setDirections(response); 

     } else { 
      window.alert('Directions request failed due to ' + status); 
     } 
    }); 

} 

這些代碼可能已經繪製了兩個點的路線。但問題是當我點擊一個標記調用showInfoWindow（）時，它將繪製一條路線，並且當它再次調用showInfoWindow（）時再次點擊另一條標記，它將繪製另一條路線，保留前一條路線。我想清除先前的一條路線。嘗試了所有在線方法，找不到原因。

Answer 1

如果您只希望當時在地圖上顯示單向導航結果，則只能創建並使用DirectionsRenderer的一個實例，但目前您會爲DirectionsService的每個結果創建一個新導航結果。

proof of concept fiddle

代碼片段：

var geocoder; 
 
var map; 
 
var places; 
 
var infoWindow = new google.maps.InfoWindow(); 
 
//Jersey City, NJ, USA 
 
var currentLat = 40.7281575; 
 
var currentLon = -74.0776417; 
 
// global reference to the DirectionsRenderer 
 
var directionsDisplay; 
 

 
function initialize() { 
 
    map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    places = new google.maps.places.PlacesService(map); 
 
    // initialize the global DirectionsRenderer 
 
    directionsDisplay = new google.maps.DirectionsRenderer({ 
 
    map: map 
 
    }); 
 
    var marker1 = new google.maps.Marker({ /* New York, NY, USA */ 
 
    position: { 
 
     lat: 40.7127837, 
 
     lng: -74.0059413 
 
    }, 
 
    placeResult: { 
 
     place_id: "ChIJOwg_06VPwokRYv534QaPC8g" 
 
    }, 
 
    map: map 
 
    }); 
 
    google.maps.event.addListener(marker1, 'click', showInfoWindow); 
 
    var marker2 = new google.maps.Marker({ /* Newark, NJ, USA */ 
 
    position: { 
 
     lat: 40.735657, 
 
     lng: -74.1723667 
 
    }, 
 
    placeResult: { 
 
     place_id: "ChIJHQ6aMnBTwokRc-T-3CrcvOE" 
 
    }, 
 
    map: map 
 
    }); 
 
    google.maps.event.addListener(marker2, 'click', showInfoWindow); 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    bounds.extend(marker1.getPosition()); 
 
    bounds.extend(marker2.getPosition()); 
 
    map.fitBounds(bounds); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize); 
 

 
function showInfoWindow() { 
 
    var marker = this; 
 
    places.getDetails({ 
 
     placeId: marker.placeResult.place_id 
 
    }, 
 

 
    function(place, status) { 
 
     if (status !== google.maps.places.PlacesServiceStatus.OK) { 
 
     return; 
 
     } 
 
     infoWindow.open(map, marker); 
 
     buildIWContent(place); 
 
    }); 
 
    var clickLat = marker.position.lat(); 
 
    var clickLon = marker.position.lng(); 
 
    var directionsService = new google.maps.DirectionsService(); 
 
    showRoute(clickLat, clickLon, directionsDisplay, directionsService); 
 
} 
 

 
function showRoute(clickLat, clickLon, directionsDisplay, directionsService) { 
 
    var pointA = { 
 
    lat: currentLat, 
 
    lng: currentLon 
 
    }; 
 
    var pointB = { 
 
    lat: clickLat, 
 
    lng: clickLon 
 
    }; 
 

 

 
    directionsDisplay.setOptions({ 
 
    suppressMarkers: true 
 
    }); 
 

 
    //directionsDisplay.setMap(map); 
 
    //directionsDisplay.setDirections({ routes: [] }); 
 
    // Set destination, origin and travel mode. 
 
    var request = { 
 
    destination: pointB, 
 
    origin: pointA, 
 
    travelMode: google.maps.TravelMode.DRIVING 
 
    }; 
 
    //directionsDisplay.setMap(null); 
 
    // Pass the directions request to the directions service. 
 
    directionsService.route(request, function(response, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     // Display the route on the map. 
 
     //directionsDisplay.set('directions', null); 
 

 
     //directionsDisplay.setMap(map); 
 
     //directionsDisplay.setDirections({ routes: [] }); 
 
     directionsDisplay.setDirections(response); 
 

 
    } else { 
 
     window.alert('Directions request failed due to ' + status); 
 
    } 
 
    }); 
 

 
}

html, 
 
body, 
 
#map_canvas { 
 
    height: 500px; 
 
    width: 500px; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> 
 
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>