Leaflet地图Marker点击事件调用函数异常问题求助

问题说明 #

作为业余开发者，在Leaflet地图开发中遇到两个问题：

• 为Marker绑定点击事件调用函数时，初始代码在页面加载时就触发alert弹窗，而非点击Marker时触发；需要保留tooltip默认显示的行为。
• 尝试用匿名函数改写后，点击Marker仍无效果。

初始代码问题分析 #

初始代码中，绑定点击事件时用了say("baron")，这是直接执行函数，而非传递函数引用给事件监听。所以页面加载时就会立刻调用say函数弹出alert，和tooltip无关。

<!-- 错误写法 -->
var MARKER2 = L.marker([42.47975912090048, -77.46811214311259]).on('click', say("baron")).addTo(map);

修改后代码的问题 #

修改后的代码里，用匿名函数包裹了say("baron")，但没有定义say函数，导致点击Marker时找不到该函数，所以没有任何效果。同时你也移除了tooltip的绑定代码，不符合保留tooltip默认显示的需求。

正确解决方案 #

1. 绑定点击事件时，用匿名函数包裹函数调用（或者用Function.prototype.bind），确保只有点击时才执行。
2. 确保say函数存在于当前作用域中。
3. 保留bindTooltip并设置permanent: true和openTooltip()，实现tooltip默认显示。

正确代码示例：

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
    <meta charset=utf-8 />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
          integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
          crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
            integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
            crossorigin="">
    </script>
    <style>
        #map { height: 1000px; width: 1400px; }
    </style>
</head>
<body>
<div id='map'></div>
<script>
    var map = L.map('map', { zoomSnap: 0.25}).setView([43.0000, -76.0000], 7.75);

    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);

    map.dragging.enable();
    map.touchZoom.enable();
    map.doubleClickZoom.enable();
    map.scrollWheelZoom.disable();
    map.boxZoom.enable();
    map.keyboard.disable();
    if (map.tap) map.tap.disable();
    document.getElementById('map').style.cursor='default';

    // 定义say函数
    function say(text){
        alert(text);
    }

    // 正确绑定点击事件：用匿名函数包裹
    var MARKER2 = L.marker([42.47975912090048, -77.46811214311259])
        .on('click', function() { say("baron"); })
        .addTo(map);

    // 保留tooltip默认显示
    MARKER2.bindTooltip("Baron Winds", {permanent: true}).openTooltip();
</script>
</body>
</html>

另外，也可以用bind来传递参数，写法更简洁：

var MARKER2 = L.marker([42.47975912090048, -77.46811214311259])
    .on('click', say.bind(null, "baron"))
    .addTo(map);

内容的提问来源于stack exchange，提问作者mshamrock