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。

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

1 个答案: