在Google地圖上清除路線

Question

我有一套從XML加載的標記;當點擊標記時，我有從當前位置渲染到標記位置的方向。但是，我希望能夠清除路線，最好是當用戶點擊不同的標記時。目前所有的路線都顯示在一起。我搞不明白我在搞什麼。我試過了directionsDisplay.setMap（null），但是沒有清除它們。請讓我知道你是否注意到問題所在。謝謝。

function loadGoogleMap(){ 
    // load google map 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + 
     'callback=MyMap'; 
    document.body.appendChild(script); 
} 


var map = '' 

function MyMap(){ 

/* 

document.getElementById('finddate').value 

*/ 

var im = 'http://www.robotwoods.com/dev/misc/bluecircle.png'; 
var CustomMarker = 'http://findmyyard.com/images/MarkerIcon.png'; 

if(navigator.geolocation){ 

    navigator.geolocation.getCurrentPosition(locate, noPos()); 
} else { 

noPos(); 

} 

function locate(position){ 


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

    var myLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
    var mapOptions = { 
     zoom: 12, 
     center: myLatLng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     zoomControl: false, 
     streetViewControl: false, 
     mapTypeControl: false, 
     panControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT}, 
     zoomControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT } 
    } 
    var map = new google.maps.Map(document.getElementById('map-canvas'), 
            mapOptions); 
    var userMarker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     icon: im 
    }); 
var infoWindow = new google.maps.InfoWindow; 



    // Change this depending on the name of your PHP file 

    downloadUrl("phps/xmltest.php", function(data) { 
    var xml = data.responseXML;   
    var markers = xml.documentElement.getElementsByTagName("marker"); 
    for (var i = 0; i < markers.length; i++) { 
     var name = markers[i].getAttribute("name"); 
     var address = markers[i].getAttribute("address"); 
     var dt1 = markers[i].getAttribute("date1"); 
     var dt2 = markers[i].getAttribute("date2"); 
     var dt3 = markers[i].getAttribute("date3"); 
     var tm1 = markers[i].getAttribute("time1"); 
     var tm2 = markers[i].getAttribute("time2"); 
     var tm3 = markers[i].getAttribute("time3"); 
     var pid = markers[i].getAttribute("PID"); 
     var d = new Date(); 
     var raw = pid * d.getFullYear(); 
     var jshtml = '<a href='+'phps/info.php?raw='+ raw +'>More Info</a>' 
     var html = "<b>" + name + "</b> <br/>" + "Date of Yard Sale: " + dt1 + '&nbsp;' + tm1 + '&nbsp;' + dt2 + '&nbsp;' + tm2 + '&nbsp;' + dt3 + '&nbsp;' + tm3 + '&nbsp;' + "<br/>" + address + "&nbsp;" + "Click this for: " + jshtml; 
     var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")), 
      parseFloat(markers[i].getAttribute("lng"))); 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: point, 
     icon: CustomMarker 
     }); 



     bindInfoWindow(marker, map, infoWindow, html, directionsDisplay); 
    } 


    }); 




function bindInfoWindow(marker, map, infoWindow, html, directionsDisplay) { 


    google.maps.event.addListener(marker, 'click', function() { 
    infoWindow.setContent(html); 
    infoWindow.open(map, marker, html); 
    center: position; 

    directionsDisplay.setMap(null) 
    directionsDisplay.setDirections({routes: []}); 
    directionsDisplay = null; 



          directionsDisplay = new google.maps.DirectionsRenderer(); 
          directionsDisplay.setMap(map) 
          var start = myLatLng; 
          var latitude = marker.getPosition().lat().toFixed(6) 
          var longitude = marker.getPosition().lng().toFixed(6) 
          var end = new google.maps.LatLng(latitude, longitude); 
          var request = { 
          origin:start, 
          destination:end, 
          travelMode: google.maps.TravelMode.DRIVING 
          }; 
          directionsService.route(request, function(result, status) { 

          if (status == google.maps.DirectionsStatus.OK) { 

           directionsDisplay.setMap(null) 
           directionsDisplay.setMap(map); 
           directionsDisplay.setDirections(result); 

          } 
          }); 


    }); 
} 

function downloadUrl(url, callback) { 
    var request = window.ActiveXObject ? 
     new ActiveXObject('Microsoft.XMLHTTP') : 
     new XMLHttpRequest; 

    request.onreadystatechange = function() { 
    if (request.readyState == 4) { 
     request.onreadystatechange = doNothing; 
     callback(request, request.status); 
    } 
    }; 


    request.open('GET', url, true); 
    request.send(); 
} 
    function doNothing() {} 
} 

Answer 1

從點擊回調刪除此：

directionsDisplay = new google.maps.DirectionsRenderer(); 

該行始終將創建一個新的DirectionsRenderer實例，但是當你只想一次顯示1條路線，你只需要一個實例（已在locate中初始化）。

當您使用單個實例時，不需要清除任何內容。一個directionRenderer將永遠不會顯示多於1個路由，只要您調用setDirections，以前繪製的路由將自動刪除。

Answer 2

沒有對我的工作 - 我需要這樣的：

// Clear past routes 
    if (directionsDisplay != null) { 
     directionsDisplay.setMap(null); 
     directionsDisplay = null; 
    }