Google Maps v3のルートにmouseoverイベントを追加するにはどうすればよいですか？

Question

私はDirectionsRendererで描かれたいくつかのルートを持つGoogleマップを持っています。私はmouseoverイベントでルートスタイルを変更したいと思いますが、どうやってわかりますか？ ありがとう

Answer 1

私が知る限り、DirectionsRendererで描画されたポリラインに直接イベントを添付する方法はありません。これを達成するには、代わりに自分のポリラインを上に描画し（したがってzIndex）、mouseover/mouseoutイベントをそれに添付する必要があります。あなたが複数のルートを持っていると言うので、あなたがroutes[]配列をループする必要があるし、各ルートのために何かをすること

var polylineOptions = new google.maps.Polyline({ 
    strokeColor: '#000000', 
    strokeOpacity: 1.0, 
    strokeWeight: 2 
}); 

var polylineOptionsMouseOver = new google.maps.Polyline({ 
    strokeColor: '#ffffff', 
    strokeOpacity: 1.0, 
    strokeWeight: 10 
}); 

google.maps.event.addListener(dirRenderer, 'directions_changed', function(event) { 

    var path = dirRenderer.getDirections().routes[0].overview_path; 
    var eventLine = new google.maps.Polyline({ 
     path: path, 
     visible: true, 
     strokeOpacity: 0, 
     zIndex: 1000 
    }); 
    eventLine.setMap(map); 

    google.maps.event.addListener(eventLine, 'mouseover', function(event) { 
     dirRenderer.setOptions({ 
      'polylineOptions':polylineOptionsMouseOver, 
      'preserveViewport': true 
     }); 
     dirRenderer.setMap(map); 
    }); 

    google.maps.event.addListener(eventLine, 'mouseout', function(event) { 
     dirRenderer.setOptions({ 
      'polylineOptions':polylineOptions, 
      'preserveViewport': true 
     }); 
     dirRenderer.setMap(map); 
    }); 

}); 

：

は、ここでは、1つのルートのみを持っていると仮定すると、どのように行うのが例です。また、私はあなたが特定のルートをスタイルすることはできないと思うので、各ルートを別々のものに保つ必要があるかもしれません。DirectionsRenderer