英文:
How to autoclose a Leaflet popup with timer when mouse move out marker
问题
Here's the translated code portion:
可以为Leaflet中的标记设置弹出窗口的自动关闭定时器。
var marker1 = L.marker([46.26734, 12.328876], { icon: myIcon4 }).on('mouseover', function (e) {
var popup = L.popup().setLatLng(e.latlng).setContent('Luoghi, Cose, Strade<br>Diga del Vajont').openOn(mappa_percorsi);
}).on('click', function (e) {
var popup = L.popup().setLatLng(e.latlng).setContent('<a class="image-popup-no-margins hover-title" href="https://atorinfriul.it/html/gpx/Luoghi_Cose_Strade__Diga_Vajont_NOT_MINIMIZED.php" Target="_blank" title="Diga del Vajont"> <img loading="lazy" src="https://atorinfriul.it/html/images/luoghi_cose_strade/Fumetto-diga-del-vajont.jpg" style="width:150px;" alt="Responsive image"></a> <div class="hover-image"><img loading="lazy" src="https://atorinfriul.it/html/images/luoghi_cose_strade/Fumetto-diga-del-vajont.jpg" alt="Responsive image"></div>').openOn(mappa_percorsi);
}).addTo(LuoghiCoseStrade);
在此示例中，悬停在标记上会打开一个带有消息“Luoghi, Cose, Strade - Diga del Vajont”的弹出窗口。单击标记后，会显示一个带有图像的新弹出窗口，并在图像上悬停时，会打开一个放大的图像模态窗口，并单击在新标签页上打开图像。
问题是，如果用户悬停在标记上（打开弹出窗口），然后移动到地图的其余部分，弹出窗口会一直保持打开，直到悬停在新标记上或在地图上单击。
这就是为什么我想添加一个定时器。
我尝试了几种方法都没有效果。
放置此代码后，我可以关闭弹出窗口，但在单击后失去了在辅助弹出窗口（带有图像的弹出窗口）中导航的可能性。
marker1.on('mouseout', function (e) {
mappa_percorsi.closePopup();
});
我尝试使用此代码，但出现错误（我的JavaScript和Leaflet知识有限，无法解决）。
setTimeout(function () { popup.close(); }, 5000);
欢迎提出任何建议。
以下是一个几乎工作的示例，以更好地解释：
请注意，这是您提供的代码的翻译部分，如果您需要其他方面的帮助，请随时提问。
英文:
It's possible to set an autoclose timer for a popup on a marker in leaflet.
var marker1 = L.marker([46.26734, 12.328876], {icon: myIcon4}).on('mouseover', function(e){var popup = L.popup().setLatLng(e.latlng).setContent('Luoghi, Cose, Strade<br>Diga del Vajont').openOn(mappa_percorsi);}).on('click', function(e){var popup = L.popup().setLatLng(e.latlng).setContent('<a class="image-popup-no-margins hover-title" href="https://atorinfriul.it/html/gpx/Luoghi_Cose_Strade__Diga_Vajont_NOT_MINIMIZED.php" Target="_blank" title="Diga del Vajont"> <img loading="lazy" src="https://atorinfriul.it/html/images/luoghi_cose_strade/Fumetto-diga-del-vajont.jpg" style="width:150px;" alt="Responsive image"></a> <div class="hover-image"><img loading="lazy" src="https://atorinfriul.it/html/images/luoghi_cose_strade/Fumetto-diga-del-vajont.jpg" alt="Responsive image"></div>').openOn(mappa_percorsi);}).addTo(LuoghiCoseStrade);
In this example, overing marker, open a popup with this message "Luoghi, Cose, Strade - Diga del Vajont". <br>Clicking on marker, a new popup is show, with an image inside it, and overing image, open a modal of image zoomed up and clicking open image on a new tab.
Problem is, that if an user over the marker (opening popup) then move on rest of map, popup stay on until a new marker is overed or a click on the map is done.
That's why I want to add a timer.
I have tried severals solutions without benefits<br>
Putting this code, I obtain to close popup, but loose possibility, after clicking to navigate in secondary popup (that one with image).
marker1.on('mouseout', function (e) {mappa_percorsi.closePopup();});
I tryed to use this, but get an error (my js and leaflet knowledge is too limited to solve)
setTimeout(function() { popup.close();}, 5000);
Any suggestion is wellcome.
Thanks
Following is a almost working example to try to explain better
thanks
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var marker = L.marker([46.26734, 12.328876], {icon: myIcon2}).on('mouseover', function(e){var popup = L.popup().setLatLng(e.latlng).setContent('Luoghi, Cose, Strade<br>Diga del Vajont').openOn(mymap);}).on('click', function(e){var popup = L.popup().setLatLng(e.latlng).setContent('<a class="image-popup-no-margins hover-title" href="https://atorinfriul.it/html/gpx/Luoghi_Cose_Strade__Diga_Vajont_NOT_MINIMIZED.php" Target="_blank" title="Diga del Vajont"> <img loading="lazy" src="https://atorinfriul.it/html/images/luoghi_cose_strade/Fumetto-diga-del-vajont.jpg" style="width:150px;" alt="Responsive image"></a> <div class="hover-image"><img loading="lazy" src="https://atorinfriul.it/html/images/luoghi_cose_strade/Fumetto-diga-del-vajont.jpg" alt="Responsive image"></div>').openOn(mymap);}).addTo(mymap);
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>
<style >
.mappa_global{max-width: 1350px;
width: 100%;
min-height: 85vh;
height: 100%;
border-radius: 25px;
padding-left: 2%;
padding-right: 2%;
margin: 0px auto;
position: relative;
z-index: 1;}
</style>
</head>
<!-- indispensabile onload per caricare lo script dei video nella hero -->
<body class="my_width">
<div>
<div class="p25_bis">
<div id="map_canvas" class="mappa_global" class="lazyload" ></div>
</div>
<script>
var mbAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>';
var mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
var Streets = L.tileLayer(mbUrl, {id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, attribution: mbAttr});
var Osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
var Esri_NatGeoWorldMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; Esri &mdash; National Geographic, Esri, DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC',
maxZoom: 16
});
var OpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
maxZoom: 17,
attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
});
var Stamen_Toner = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}{r}.{ext}', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
subdomains: 'abcd',
minZoom: 0,
maxZoom: 20,
ext: 'png'
});
var mymap = L.map('map_canvas', {
center: [46.26734, 12.328876],
zoom: 9,
layers: [Stamen_Toner]
});
var baseLayers = {
'Toner': Stamen_Toner,
'OpenTopoMap': OpenTopoMap,
'OpenStreetMap': Osm,
'Streets': Streets,
'National Geographic': Esri_NatGeoWorldMap
};
var layerControl = L.control.layers(baseLayers).addTo(mymap);
var myIcon2 = L.icon({
iconUrl: 'https://unpkg.com/leaflet@1.8.0/dist/images/marker-icon.png',
iconSize: [40, 40], // size of the icon
});
// arrivo Percorso
</script>
</div>
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="https://atorinfriul.netsons.org/html/js/jquery.min.js"></script>
<!-- Magnific Popup core JS file -->
</body>
</html>
<!-- end snippet -->
答案1
得分: 0
你差一点就做到了。如果我理解正确，您想在离开图层时仅关闭鼠标悬停的弹出窗口。您可以定义一个变量来检查哪个弹出窗口已打开，然后编写一个在鼠标离开时关闭它的函数。
var whichPopup = 0;
var marker = L.marker([46.26734, 12.328876], {icon: myIcon2}).on('mouseover', function(e){
popup = L.popup().setLatLng(e.latlng).setContent('Luoghi, Cose, Strade<br>Diga del Vajont').openOn(mymap);
whichPopup = 1;
}).on('click', function(e){
var popup2 = L.popup().setLatLng(e.latlng).setContent('<a class="image-popup-no-margins hover-title" href="https://atorinfriul.it/html/gpx/Luoghi_Cose_Strade__Diga_Vajont_NOT_MINIMIZED.php" Target="_blank" title="Diga del Vajont"> <img loading="lazy" src="https://atorinfriul.it/html/images/luoghi_cose_strade/Fumetto-diga-del-vajont.jpg" style="width:150px;" alt="Responsive image"></a> <div class="hover-image"><img loading="lazy" src="https://atorinfriul.it/html/images/luoghi_cose_strade/Fumetto-diga-del-vajont.jpg" alt="Responsive image"></div>').openOn(mymap);
whichPopup = 0;
}).addTo(mymap);
marker.on('mouseout', function (e) {
if (whichPopup == 1){
setTimeout(function() { mymap.closePopup();}, 5000);
}
});
英文:
You almost did it. If I get you right you want to close only the mouseover popup when leaving the layer. you can define a variable to check which popup is opened and then write a function to close it on mouse leave.
var whichPopup = 0;
var marker = L.marker([46.26734, 12.328876], {icon: myIcon2}).on('mouseover', function(e){popup = L.popup().setLatLng(e.latlng).setContent('Luoghi, Cose, Strade<br>Diga del Vajont').openOn(mymap);whichPopup = 1;}).on('click', function(e){var popup2 = L.popup().setLatLng(e.latlng).setContent('<a class="image-popup-no-margins hover-title" href="https://atorinfriul.it/html/gpx/Luoghi_Cose_Strade__Diga_Vajont_NOT_MINIMIZED.php" Target="_blank" title="Diga del Vajont"> <img loading="lazy" src="https://atorinfriul.it/html/images/luoghi_cose_strade/Fumetto-diga-del-vajont.jpg" style="width:150px;" alt="Responsive image"></a> <div class="hover-image"><img loading="lazy" src="https://atorinfriul.it/html/images/luoghi_cose_strade/Fumetto-diga-del-vajont.jpg" alt="Responsive image"></div>').openOn(mymap);whichPopup = 0}).addTo(mymap);
marker.on('mouseout', function (e) {
if (whichPopup == 1){
setTimeout(function() { mymap.closePopup();}, 5000);
}
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论