微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

一旦鼠标移离 Marker,就无法从 Marker 释放弹出窗口

如何解决一旦鼠标移离 Marker,就无法从 Marker 释放弹出窗口

目前我可以将鼠标悬停在地图上的标记上并获取有关标记的信息。

但是一旦鼠标从标记上移开,信息就不会被释放。我添加了 el.addEventListener('mouseleave',() => popup.remove());到我的代码,但一旦鼠标移开标记,它就没有释放信息。

    // Remove old markers and clear list
    markers.map(function(current_marker) {
        current_marker.remove();
    });
    markers = []

    // Add markers to list
    var home_div = document.createElement('div');
    home_div.className = 'marker';
    home_div.style.backgroundImage = 'url(images/house_icon_48.png)';
    home_div.style.width = '48px';
    home_div.style.height = '48px';
    markers.push(new mapBoxgl.Marker(home_div)
        .setLngLat([eval_response.lng,eval_response.lat]));

    eval_response.locations.forEach(function(marker) {
        // create a DOM element for the marker
        var el = document.createElement('div');
        el.className = 'marker';
        // DOes this work and if so add in the logic to handle this hot mess
        const generator_type = marker.Generator;
        if (generator_type in GENERATOR_TO_IMAGE_MAPPING) {
            el.style.backgroundImage = GENERATOR_TO_IMAGE_MAPPING[generator_type];
        } else {
            el.style.backgroundImage = "url(images/question-mark.png)";
        }

        function randomSpacing(max,max_spacing = 1e-5) {
            return (Math.random() * max_spacing * 2) - max_spacing;
        }
        [marker_lat,marker_lng] = marker.Coordinates.reverse()
        marker_lat += randomSpacing()
        marker_lng += randomSpacing()
        el.style.width = '32px';
        el.style.height = '32px';
        el.addEventListener('mouseenter',function() {

        // hover event listener
           //el.addEventListener('mouseleave',() => popup.remove());
            window.alert("Generator type: " + generator_type + "\nGenerator Address: " + marker.Address_1 + "\ndistance: " + marker.distances.toFixed(4));
              
       // add popup to marker
       current_marker.setPopup(popup);
       });

        // add marker to list
        markers.push(new mapBoxgl.Marker(el)
            .setLngLat([marker_lat,marker_lng]));
    });

      // display markers
    markers.map(function(current_marker) {
        current_marker.addTo(map);
    });

});

document.getElementById("center-button").addEventListener('click',function() {
    // Replace with the center,make sure we update it
    console.log("Center-button clicked")
    map.flyTo({
        center: center,essential: true
    });
});

Popup from Marker

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。