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

我知道这个问题很老了，但我也遇到了这个问题并提出了一个很好的解决方案。而不是直接将事件监听器添加到<div id="main" style="white-space:pre;"> function abc123 { function abc123 { function something { function abcsomething { if { function 123 { no-match </div>，而是将它们应用于元素。

DivIcon

这对我来说非常有用。我的设置有点不同，因为它全部都在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);
    });

在标记上的传单mouseout事件

2 个答案: