獲取從地理位置到標記的路線，點擊標記時

Question

我生成了一個地圖，標記從生成的XML文件中加載。我確定了我的位置。現在，我試圖從點擊標記的位置獲取路標。這是我的代碼，可以完成這項工作。其他一切正常工作，除非我嘗試點擊標記並生成方向，也許你可以幫我弄清楚我做錯了什麼。謝謝。

function initialize() { 


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


    navigator.geolocation.getCurrentPosition(locate); 

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

    function locate(position) { 
     var myLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
     var mapOptions = { 
      zoom: 12, 
      center: myLatLng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      zoomControl: true, 
      streetViewControl: false, 
     } 
     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("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 point = new google.maps.LatLng(
       parseFloat(markers[i].getAttribute("lat")), 
       parseFloat(markers[i].getAttribute("lng"))); 
      var html = "<b>" + name + "</b> <br/>" + address; 
      var marker = new google.maps.Marker({ 
      map: map, 
      position: point, 
      }); 
      bindInfoWindow(marker, map, infoWindow, html); 
     } 
     }); 

    function bindInfoWindow(marker, map, infoWindow, html) { 
     google.maps.event.addListener(marker, 'click', function() { 
     var start = myLatLng; 
     var end = position; 
     var request = { 
     origin:start, 
     destination:end, 
     travelMode: google.maps.TravelMode.Driving  
     } 

     }); 
     directionsServices.route(request, function(response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
     } 
     }); 

    } 

    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(null); 
} 
} 
} 

Answer 1

這段代碼有幾個問題。

directionsDisplay變量未定義。這應該在locate()函數來完成：

var directionsDisplay = new google.maps.DirectionsRenderer(); 
    directionsDisplay.setMap(map); 

directionsService.route()應標記點擊事件處理程序內調用。

可變request應定義爲全球性的，可變end應該有不同的價值...

見example at jsbin。