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