如何在Google Maps v3中将路径添加到路线中？

Question

我有一个带有DirectionsRenderer的几条路线的Google地图。我想用鼠标悬停事件来改变路线风格，但是我不知道怎么样，是否可行？ 谢谢

Answer 1

据我所知，没有办法将事件直接附加到由DirectionsRenderer绘制的折线上。要完成此操作，您需要在自己的顶部绘制自己的折线（因此为zIndex），然后将mouseover/mouseout事件附加到该折线上。

下面是它是如何做一个例子，假设你只有一个途径：

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

}); 

既然你说你有多个路由，您可以通过routes[]阵列需要循环，并为每个路由做一些事情。另外，我不认为你可以设计一条特定的路线，所以你可能需要将每条路线保存在一个独立的DirectionsRenderer。