Как добавить событие наведения мыши на маршрут в Google Maps v3?

Question

У меня есть карты Google с несколькими маршрутами, нарисованными с помощью 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.