如何将鼠标悬停事件添加到 Google 地图 v3 中的路线？

Question

我有一个谷歌地图，其中有几条路线是用 DirectionsRenderer 绘制的。我想通过鼠标悬停事件更改路线样式，但我不知道如何操作，可能吗？ 谢谢

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 中。