directionsRenderer에 mouseover 이벤트 추가 Google Maps API v3

Question

DirectionsService를 사용할 때 directionsoverendr에 mouseover 이벤트 리스너를 추가하려면 어떻게해야하나요?

리스너를 직선에 추가하는 방법을 알고 있지만 directionsRenderer에서 객체를 찾지 못하는 것 같습니다.

function getStraightLine(coordinates) { 
    if (progress.length == 0) 
      progress = coordinates; 
     else 
      progress.push(coordinates[1]); 
     updateDistance(); 
     var line = new google.maps.Polyline({ 
      path: coordinates, 
      strokeColor: "#FF0000", 
      strokeOpacity: .5, 
      strokeWeight: 2, 
      map: map 
     }); 
     google.maps.event.addListener(line, 'mouseover', function(){ 
      alert("moused over straight line!"); 
     }); 
     return line; 
    } 

을하지만 그렇지 않은 :

예를 들어이 작품

대신 directionsPath 내가 시도한 결과

function getDirectionsPath(coordinates) { 
     var directionsPath = new google.maps.DirectionsRenderer(); 
     directionsPath.setMap(map); 

     var request = { 
      origin: coordinates[0], 
      destination: coordinates[1], 
      travelMode: google.maps.TravelMode.WALKING 
     }; 

     directionsService.route(request, function (result, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
       var coordinates = result.routes[0].overview_path; 
       if (progress.length == 0) 
        progress = coordinates; 
       else 
        progress = progress.concat(coordinates); 
       directionsPath.setDirections(result); 
       google.maps.event.addListener(directionsPath, 'mouseover', function(){ 
        alert("moused over straight line!"); 
       }); 
      } 
     }); 

     return directionsPath; 
    } 

, result.routes [0], 그리고 몇 가지 다른.

그래서 어떤 물건을 사용해야합니까?

Answer 1

setDirections(directionsResult) 메서드에서 생성 된 '폴리 라인'이벤트에서 '드래그'이벤트를 사용합니까?

당신이, 당신이 이런 식으로 혼자서 '폴리'를 만들 수 있다고 생각하지 않는 경우 :

당신은 문제가 google.maps.DirectionsRenderer().setDirections(result) 같은 방법을 사용하여 해결 한 경우

directionsService.route(request, function (result, status) 
{ 
     var myRoute = result.routes[0].legs[0]; 
     if (status == google.maps.DirectionsStatus.OK) 
     { 
      for (var i = 0; i < myRoute.steps.length; i++) { 
       for (var j = 0; j < myRoute.steps[i].lat_lngs.length; j++) { 
        points.push(myRoute.steps[i].lat_lngs[j]); 
       } 
      } 
     } 
    drawRoute(); 
} 

function drawRoute() 
{ 
    var routLine = new google.maps.Polyline(
     { 
      path: points, 
      strokeColor: "Red", 
      strokeOpacity: 0.5, 
      strokeWeight: 10  
     } 
    ); 
    routLine.setMap(mapCanvas); 

    // Add a listener for the rightclick event on the routLine 
    *google.maps.event.addListener(routLine, 'mouseover', function(){ 
       alert("moused over straight line!"); 
      });* 
} 

?

Answer 2

두 번째 예제가 작동하지 않는 이유는 DirectionsRenderer() 클래스가 생성하는 개체와 관련된 이벤트가 없기 때문입니다. DirectionsResult 개체를 생성합니다. 워드 프로세서 기준

http://code.google.com/apis/maps/documentation/javascript/reference.html#DirectionsRenderer

는 :

http://code.google.com/apis/maps/documentation/javascript/reference.html#DirectionsResult

DirectionsResultDirectionsRoutes 오브젝트의 배열을 포함한다. 위의 코드를 사용하여 directionsPath 개체를 사용하여 directionsPath.routes 경로를 얻은 다음 첫 번째 경로를 directionsPath.routes[0]으로 가져옵니다.

여기에서 의 배열을 directionsPath.routes[0]에 사용하여 폴리 라인을 구성한 다음 mouseover 이벤트를 사용할 수 있습니다.