DirectionsRendererにmouseoverイベントを追加するGoogle Maps API v3

Question

DirectionsServiceを使用するときに、directionsRendererに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)メソッドから生成された 'ポリライン'で 'drag'イベントを使用しますか？

そうしないと、私はあなたがこのように自分で「ポリライン」を作成することができると思う：

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!"); 
      });* 
} 

あなたは問題がgoogle.maps.DirectionsRenderer().setDirections(result)のようなメソッドを使用して解決した場合は？

Answer 2

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

DirectionsResult目的はDirectionsRoutesの配列を含んでいます。上記のコードを使用して、私はdirectionsPathオブジェクトを使用してルートを取得します：directionsPath.routesそして最初のルートdirectionsPath.routes[0]を取得します。

そこからの配列をdirectionsPath.routes[0]に使用してポリラインを構築し、それを使用してmouseoverイベントを使用する必要があります。