마커를 클릭하면 geolocation에서 마커로 방향을 얻습니다.

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보기 ... 다른 값을 가져야한다.