标记上的传单 mouseout 事件

Question

我编写此代码是为了在鼠标悬停时更改标记的图标，并在鼠标悬停时将其改回，但鼠标悬停后似乎永远不会触发 mouseout 事件。
我也提到了这个问题（Leaflet Mouseout called on MouseOver event），但我不知道这是否是这里的问题。如果这是问题，我应该如何解决它。

    L.marker([20.123,40,234],{icon:icon}).on('mouseover',function(e){
        this.setIcon(highlight);
    }).on('mouseout',function(e){
        this.setIcon(icon);
    }).addTo(map);

编辑 1： 这是完整的代码：

    var map = L.map('map').fitWorld();
    L.tileLayer("https://api.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}",{           
        id:'mapankit.137364c3', 
        accessToken:'pk.eyJ1IjoibWFwYW5raXQiLCJhIjoiY2lramo5anZoMDdjMnVjajdjYWtqbXZ3eiJ9.uR_6t2C2f5Ib9qOPnt_l8Q'}).addTo(map);

    var icon = L.divIcon({
        html : '<svg width="12px" height="12px"><g><path class="outer" d="M-5 0 A5 5 0 0 1 5 0 A5 5 0 0 1 -5 0" style="stroke-opacity: 1; stroke-width: 2; fill: white; stroke: rgb(0, 198, 228);" transform="translate(6,6)"></path><path class="inner" d="M-2.5 0 A2.5 2.5 0 0 1 2.5 0 A2.5 2.5 0 0 1 -2.5 0" style="stroke-opacity: 1; stroke-width: 0; fill: white; stroke: white;" transform="translate(6,6)"></path></g></svg>',
        className : 'foo',
        iconAnchor : L.point(6,6)
    });

    var highlight = L.divIcon({
        html : '<svg width="25px" height="25px"><g><path class="outer" d="M-10 0 A10 10 0 0 1 10 0 A10 10 0 0 1 -10 0" style="fill: white; stroke: rgb(0, 198, 228); stroke-width: 2;" transform="translate(12,12)"></path><path class="inner" d="M-5 0 A5 5 0 0 1 5 0 A5 5 0 0 1 -5 0" style="fill: rgb(0, 198, 228); stroke: rgb(0, 198, 228); stroke-opacity: 1;" transform="translate(12,12)"></path></g></svg>',
        className : 'bar',
        iconAnchor : L.point(12,12)
    })

    L.marker([20.123,40,234],{icon:icon}).on('mouseover',function(e){
        this.setIcon(highlight);
    }).on('mouseout',function(e){
        this.setIcon(icon);
    }).addTo(map);

Answer 1

我知道这个问题已经很老了，但我也遇到了这个问题并且想出了一个很好的解决方案。不要将事件侦听器直接添加到DivIcon，而是将它们应用于元素。

var map = ...

var normal = ...

var highlight = ...

function updateIcon(marker, icon) {
    marker.setIcon(icon)
    $(marker.getElement()).on({
        'mouseenter': (e) => { updateIcon(marker, highlight); $(this).off() },
        'mouseleave': (e) => { updateIcon(marker, normal);    $(this).off() }
    })
}

var marker = L.marker([20.123,40,234]).addTo(map)

updateIcon(marker, normal)

这对我来说非常有效。我的设置有点不同，因为它都在 VueJS 内部，但一般机制是相同的。如果需要任何调整，请告诉我。

Answer 2

你不能这样做，setIcon 不能在 L.DivIcon 中动态工作，只有 L.Icon。 但如果一个是图标，你可以让它工作：

var highlight = L.divIcon({
        html: '<svg width="25px" height="25px"><g><path class="outer" d="M-10 0 A10 10 0 0 1 10 0 A10 10 0 0 1 -10 0" style="fill: black; stroke: rgb(0, 198, 228); stroke-width: 2;" transform="translate(12,12)"></path><path class="inner" d="M-5 0 A5 5 0 0 1 5 0 A5 5 0 0 1 -5 0" style="fill: rgb(0, 198, 228); stroke: rgb(0, 198, 228); stroke-opacity: 1;" transform="translate(12,12)"></path></g></svg>',
        className: 'foo',
        iconAnchor: [12, 12]
    });
    var myIcon = L.icon({
        iconUrl: 'my-icon.png',
        iconRetinaUrl: 'my-icon@2x.png',
        shadowUrl: 'my-icon-shadow.png',
        shadowRetinaUrl: 'my-icon-shadow@2x.png'

    });

    var x = L.marker([20.123, 40, 234], { icon: myIcon }).addTo(currentView);
    x.on("mouseover", function () {            
        this.setIcon(myIcon);
    });

    x.on("mouseout", function () {
        this.setIcon(highlight);
    });