leaflet添加、移除、激发事件(evented)

最新推荐文章于 2025-06-20 15:51:17 发布

☆L↑H★

最新推荐文章于 2025-06-20 15:51:17 发布

阅读量8.6k

点赞数 1

本文档提供了一个使用Leaflet JavaScript库进行地图事件操作的示例，包括添加、移除事件，添加一次性事件，激发事件及检查特定事件的存在状态。通过实际代码展示了如何在地图上响应click和contextmenu事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载：https://blog.youkuaiyun.com/u014711094/article/details/78918622

jsrun查看测试效果：http://jsrun.net/aiqKp/edit

<!DOCTYPE html>
<html>
<head>
    <title>leaflet事件操作example</title>
    <link rel="stylesheet" href="https://npmcdn.com/leaflet@1.2.0/dist/leaflet.css" />
    <script src="https://npmcdn.com/leaflet@1.2.0/dist/leaflet.js"></script>
</head>
<body>
    <div id="map" style="height: 300px; width: 300px">
    </div>
    <div style="height: 100px; width: 300px; background-color:#ccc;">
      <p><b>本测试以click事件为例</b></p>
      <input id="btnAdd" type="button" value="添加事件">
      <input id="btnRemove" type="button" value="移除事件">
      <input id="btnOnce" type="button" value="添加一次性事件">
      <input id="btnFire" type="button" value="激发事件">
      <input id="btnHasListeners" type="button" value="查看map是否有click事件">
    </div>

    <script>
        var map = L.map('map', {
          center: [40, 116],
          zoom: 12
        });

        var layer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="https://osm.org">OpenStreetMap</a> contributors'
        }).addTo(map)

        //以下是方法对应的别名，map.on()和map.addEventListener的效果相同
        //addEventListener = on, removeEventListener = off(...), clearEventListener = off()
        //addOneTimeListener = once, fireEvent = fire, hasEventListeners = listens

        //on和off都有两种方式，多个事件用空格隔开。注意，多次添加事件，响应函数也将多次执行，可一次性移除
        btnAdd.onclick = function() {
          //map.on({click: handle_func(e), contextmenu: handle_func(e)});
          map.on('click contextmenu', function(e) {
            alert(e.latlng.lng);
          });
        }

        btnRemove.onclick = function() {
          //map.off({click: handle_func(e), contextmenu: handle_func(e)});
          //map.off()，无参数则remove all events
          map.off('click contextmenu');
        }

        btnOnce.onclick = function() {
          map.once('click', function(e) {
            alert(e.latlng.lng);
          });
        }
        //激发事件
        btnFire.onclick = function() {
          var latlngPoint = new L.LatLng(40, 116);
          //注意第二个参数object: data，包含latlng，处理函数用e.latlng获取
          map.fire('click', {
             latlng: latlngPoint,
             layerPoint: map.latLngToLayerPoint(latlngPoint),
             containerPoint: map.latLngToContainerPoint(latlngPoint)
          });
        }
        //查看是否有click事件
        btnHasListeners.onclick = function() {
          alert(map.listens('click'));
        }
    </script>
</body>
</html>
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69