Leaflet中点击事件调用函数

问题描述 投票:0回答:1

我希望这里有一些传单专家可以解释我在下面的代码中缺少的内容。 我只是一个业余程序员,所以如果我的术语没有完全有意义,我深表歉意。

我通过单击添加到传单地图的标记来调用函数时遇到错误。因此,如下所示,我编写了一个简单的函数来在单击标记时显示页面警报。奇怪的是,当网页加载时,警报立即触发(如下图所示)。

在此输入图片描述

</script>


<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin="">
</script>

<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';


function say(text){
    alert(text)
}

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



    MARKER2.bindTooltip("Baron Winds", {permanent: true}).openTooltip();


</script>

我想知道这是否与默认打开工具提示有关。我真的需要这种行为,所以,如果这是问题所在,任何解决方法将不胜感激

  • M

06/11/24 更新:

尝试了 GrzegorzT 的建议,但单击标记仍然没有效果。修改后的代码:

<!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/[email protected]/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin="">
</script>

</head>

<body>
    <style>
        #map { height: 1000px; }
        #map { width: 1400px; }
        /*{scroll-behavior: smooth;}*/
    </style>

<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';

    var MARKER2 = L.marker([42.47975912090048, -77.46811214311259]).on('click', function() {say("baron")}).addTo(map);
</script>

</body>
</html>
javascript html leaflet eventhandler
1个回答
0
投票

忽略 06/11/24 更新...该建议有效,但仍然需要/依赖于全局函数“say”:

function say(text){
    alert(text)
}
© www.soinside.com 2019 - 2024. All rights reserved.