在標記上的傳單mouseout事件

Question

我寫了這段代碼來改變鼠標移動時標記的圖標，然后在鼠標移動時將其更改回來，但是鼠標移開后鼠標輸出事件似乎永遠不會被觸發。
我也提到了這個問題（ Leaflet Mouseout調用MouseOver事件 ），但我不知道這是否是問題。 如果這是問題，我應該如何解決它。

    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.Icon在L.DivIcon中動態工作。 但如果一個是你可以上班的圖標：

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