Leaflet 弹出窗口管理：实现鼠标移出标记的定时自动关闭（区分悬停与点击）-js教程-PHP中文网

Leaflet 弹出窗口管理：实现鼠标移出标记的定时自动关闭（区分悬停与点击）

本教程详细介绍了如何在 Leaflet 地图中实现智能的弹出窗口自动关闭功能。针对鼠标悬停触发的弹出窗口，我们通过结合事件监听、状态标志和 setTimeout 函数，实现了在鼠标移出标记后，经过指定延时自动关闭弹出窗口，同时确保点击触发的弹出窗口不受影响，提供更灵活的用户交互体验。

引言：Leaflet 弹出窗口的挑战

在 leaflet 地图应用中，标记（marker）是展示地理位置信息的核心组件，而弹出窗口（popup）则是与标记交互、显示详细信息的常用方式。通常，我们可以通过 mouseover 事件在鼠标悬停在标记上时显示弹出窗口，通过 click 事件在点击标记时显示另一个弹出窗口。

然而，一个常见的用户体验问题是：当用户将鼠标移出标记后，由 mouseover 触发的弹出窗口会一直保持打开状态，直到用户点击地图其他区域或悬停到其他标记上。这可能导致地图界面混乱，尤其是在标记密集的情况下。更复杂的需求是，我们希望鼠标悬停触发的弹出窗口在鼠标移开一段时间后自动关闭，但通过点击标记打开的弹出窗口则应保持打开状态，以便用户进行更深入的交互（例如点击弹出窗口内的链接或图片）。

直接在 mouseout 事件中调用 mymap.closePopup() 会导致所有打开的弹出窗口都被关闭，这与我们希望点击触发的弹出窗口保持打开的需求相悖。因此，我们需要一种更精细的控制机制。

核心概念与解决方案

为了解决上述问题，我们将利用 Leaflet 的事件系统、JavaScript 的定时器功能以及一个简单的状态管理机制。

易标AI

告别低效手工，迎接AI标书新时代！3分钟智能生成，行业唯一具备查重功能，自动避雷废标项

查看详情

事件监听： Leaflet 提供了 mouseover (鼠标移入)、mouseout (鼠标移出) 和 click (点击) 等事件，我们可以为标记绑定这些事件以响应用户交互。
弹出窗口管理： L.popup() 用于创建弹出窗口实例，openOn(map) 用于将其添加到地图并显示，map.closePopup() 用于关闭当前地图上打开的弹出窗口。
状态标志： 引入一个全局或可访问的变量作为状态标志，用于记录当前打开的弹出窗口是由 mouseover 还是 click 事件触发的。
定时器： setTimeout() 函数允许我们在指定延迟后执行一段代码，这正是实现定时关闭的关键。

解决方案思路： 我们定义一个变量 whichPopup 来跟踪弹出窗口的类型。

当鼠标悬停时，打开一个弹出窗口，并将 whichPopup 设置为 1。
当点击标记时，打开另一个（通常是更持久的）弹出窗口，并将 whichPopup 设置为 0。
当鼠标移出标记时，检查 whichPopup 的值。如果它是 1（表示是悬停弹出窗口），则启动一个 setTimeout 定时器，在几秒后关闭地图上的弹出窗口。如果 whichPopup 是 0（表示是点击弹出窗口），则不执行任何关闭操作。

示例代码

以下是一个完整的 Leaflet 地图示例，演示了如何实现带计时器的鼠标移出自动关闭弹出窗口，并区分悬停与点击行为。

<!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">
  <title>Leaflet 弹出窗口定时关闭教程</title>

  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin="" />
  <script src="https://unpkg.com/leaflet/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>
<body class="my_width">

<div>
  <div class="p25_bis">
    <div id="map_canvas" class="mappa_global 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/dist/images/marker-icon.png',
      iconSize: [40, 40], // size of the icon
    });

    // 定义一个变量来跟踪当前打开的是哪种类型的弹出窗口
    // 0: 点击触发的弹出窗口 (不自动关闭)
    // 1: 鼠标悬停触发的弹出窗口 (自动关闭)
    var whichPopup = 0;
    var popupCloseTimer; // 用于存储定时器ID

    var marker = L.marker([46.26734, 12.328876], {icon: myIcon2})
      .on('mouseover', function(e){
        // 清除任何现有的定时器，防止冲突
        if (popupCloseTimer) {
            clearTimeout(popupCloseTimer);
        }
        // 打开悬停弹出窗口
        L.popup().setLatLng(e.latlng).setContent('Luoghi, Cose, Strade<br>Diga del Vajont').openOn(mymap);
        whichPopup = 1; // 设置状态为悬停弹出窗口
      })
      .on('click', function(e){
        // 清除任何现有的定时器
        if (popupCloseTimer) {
            clearTimeout(popupCloseTimer);
        }
        // 打开点击弹出窗口
        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; // 设置状态为点击弹出窗口
      })
      .on('mouseout', function (e) {
        // 如果当前是悬停弹出窗口，则设置定时器关闭
        if (whichPopup === 1){
            // 设置一个5秒的定时器来关闭弹出窗口
            popupCloseTimer = setTimeout(function() {
                mymap.closePopup();
                whichPopup = 0; // 关闭后重置状态
            }, 5000); // 5000毫秒 = 5秒
        }
      })
      .addTo(mymap);
  </script>
</div>

<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="https://atorinfriul.netsons.org/html/js/jquery.min.js"></script>

</body>
</html>

登录后复制

代码解析

var whichPopup = 0;: 声明一个全局变量 whichPopup，用于存储当前弹出窗口的类型状态。初始值为 0，表示没有弹出窗口或当前是点击触发的弹出窗口。
var popupCloseTimer;: 声明一个变量来存储 setTimeout 返回的定时器 ID，这允许我们在需要时清除（取消）定时器。
marker.on('mouseover', function(e){...}):
- 当鼠标移入标记时，首先检查并清除任何可能存在的 popupCloseTimer。这很重要，因为如果用户在定时器结束前再次移入标记，我们不希望之前的关闭操作被执行。
- L.popup().setLatLng(e.latlng).setContent(...).openOn(mymap);：创建一个新的弹出窗口并将其打开在地图上。
- whichPopup = 1;：将 whichPopup 设置为 1，表示当前打开的是一个由鼠标悬停触发的弹出窗口。
marker.on('click', function(e){...}):
- 当点击标记时，同样清除任何可能存在的 popupCloseTimer。
- 打开一个包含图片和链接的弹出窗口。
- whichPopup = 0;：将 whichPopup 设置为 0，表示当前打开的是一个由点击触发的弹出窗口。这种类型的弹出窗口不应被自动关闭。
marker.on('mouseout', function (e) {...}):
- 当鼠标移出标记时，首先检查 if (whichPopup === 1)。只有当当前打开的弹出窗口是悬停类型时，才执行后续的关闭逻辑。
- popupCloseTimer = setTimeout(function() { mymap.closePopup(); whichPopup = 0; }, 5000);：设置一个定时器。在 5000 毫秒（5秒）后，执行匿名函数。
  - mymap.closePopup();：关闭当前地图上打开的弹出窗口。
  - whichPopup = 0;：在弹出窗口关闭后，将 whichPopup 重置为 0，表示当前没有悬停弹出窗口处于活动状态。

注意事项

计时器时长： setTimeout 的延迟时间（示例中为 5000 毫秒）应根据实际需求和用户体验进行调整。过短可能导致用户来不及阅读，过长则可能仍然感觉弹出窗口停留时间过久。
用户体验优化： 示例中包含了在 mouseover 和 click 事件中清除 popupCloseTimer 的逻辑。这意味着如果用户在定时器结束前再次将鼠标移回标记或点击标记，自动关闭操作会被取消，这极大地提升了用户体验。
全局变量管理： whichPopup 和 popupCloseTimer 在此示例中作为全局变量使用。在大型应用中，建议将此类状态和逻辑封装到更小的作用域（如对象或模块）中，以避免全局变量污染。
多个标记： 如果地图上有多个标记，并且每个标记都有类似的弹出窗口行为，上述逻辑可以很好地扩展。mymap.closePopup() 总是关闭当前在地图上打开的那个弹出窗口，而 whichPopup 变量负责决定何时触发这个关闭动作。
交互复杂性： 如果弹出窗口内部包含可交互元素（如按钮、表单），并且用户可能需要将鼠标移入弹出窗口内部进行操作，那么简单的 mouseout 逻辑可能需要进一步细化。例如，可以监听弹出窗口自身的 mouseout 事件，或者在弹出窗口被激活时，将标记的 mouseout 事件暂时禁用。本教程的解决方案适用于弹出窗口内容主要是信息展示的场景。

总结

通过引入一个简单的状态标志 (whichPopup) 并结合 Leaflet 的事件监听以及 JavaScript 的 setTimeout 定时器，我们成功地实现了一个智能的 Leaflet 弹出窗口管理方案。这使得鼠标悬停触发的弹出窗口能够在用户移开鼠标后自动关闭，而点击触发的弹出窗口则能保持打开，从而在提供信息便捷性的同时，也保证了重要信息的持久展示，显著提升了地图应用的交互性和用户体验。

以上就是Leaflet 弹出窗口管理：实现鼠标移出标记的定时自动关闭（区分悬停与点击）的详细内容，更多请关注php中文网其它相关文章！