マーカー上のリーフレットのマウスアウトイベント

Question

マウスオーバー時にマーカーのアイコンを変更するためにこのコードを書きましたが、マウスオーバー時にマウスカーソルを戻すとマウスオーバーイベントが発生することはありません。
私はこの質問（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

、setIconはL.IconでL.DivIconでダイナミックな作品をdoens't。 が、1つはあなたが動作するように作ることができるのアイコンである場合：

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

Answer 2

私はこの質問はかなり古いですが、私はあまりにもこの問題を抱えていたし、かなり良い解決策が出ていることを知っています。イベントリスナーを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の内部にあるので少し異なりますが、一般的な仕組みは同じです。調整が必要な場合は教えてください。