Effacer itinéraire dans des directions Google Maps

Question

J'ai un ensemble de marqueurs chargés à partir d'un fichier XML; Quand on clique sur un marqueur, j'ai des directions rendues depuis l'emplacement actuel jusqu'à la position du marqueur. Cependant, j'aimerais pouvoir effacer un itinéraire, de préférence lorsque l'utilisateur clique sur un autre marqueur. Actuellement, toutes les routes apparaissent ensemble. Je n'arrive pas à comprendre où je me trompe. J'ai essayé directionsDisplay.setMap (null) mais cela ne les efface pas. S'il vous plaît laissez-moi savoir si vous remarquez quel est le problème. Je vous remercie.

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

Retirez celui-ci le clic-rappel:

directionsDisplay = new google.maps.DirectionsRenderer(); 

Cette ligne crée toujours une nouvelle DirectionsRenderer instance, mais quand vous voulez seulement afficher 1 route à un moment vous avez seulement besoin d'une seule instance (qui a déjà été initialisé en locate).

Il n'y aura pas besoin d'effacer quoi que ce soit lorsque vous utilisez une seule instance. Un single directionsRenderer ne montrera jamais plus de 1 route, dès que vous appelez setDirections, la route précédemment dessinée sera automatiquement supprimée.

Answer 2

n'a pas fonctionné pour moi - je besoin ceci:

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