Leaflet综合

中文教程

参考一

点击获取坐标位置：三方法

map.on("click", ({ latlng }) => {
  console.log("坐标：", Object.values(latlng));
})

// 监听 mouseup 事件
map.on('mouseup', (e) => {
  let latlng = e.latlng;
  console.log(latlng);// {lat: 30.59, lng: 114.32}
});
 
// 取消 mouseup 事件。注意：如果 mouseup 多次添加监听，该方式会删除全部的监听
map.off('mouseup');

function onMouseup(e) {
  let latlng = e.latlng;
  console.log(latlng);// {lat: 30.59, lng: 114.32}
}
 
// 监听 mouseup 事件
map.on('mouseup', onMouseup);
 
// 取消 mouseup 事件
map.off('mouseup', onMouseup);

点击时添加标注

// vue 中图片需要 import
import remarkIcon from './redflag.png';
 
// 图标对象
let icon = L.icon({
    iconUrl: remarkIcon,
    iconSize: [16, 16],// 图片大小
    iconAnchor: [1, 16] //位移，原点是左上角。X正轴右侧，Y正是下侧
});
 
// 添加
let remark = L.marker([31.369,121.531],{ icon: icon }).addTo(map);

js 实现单击、双击事件

<button id="clickBtn1">单击/双击按钮1</button>
<button onclick="btnClick()" ondblclick="btndbClick()">单击/双击按钮2</button>

    // 方法一
    var clickBtn = document.getElementById("clickBtn1");
    clickBtn.onclick = function () {
        console.log("单击==")
    }
 
    clickBtn.ondblclick = function () {
        console.log("双击---");
    }
 
    // 方法二
    function btnClick(e) {
        console.log("单击==")
    }
 
    function btndbClick(e) {
        console.log("双击---");
    }

定时参考

<button onclick="single(event)" ondblclick="double(event)">按钮</button>

var time = 200;
var timeOut  = null;

function single (e) {
    clearTimeout(timeOut); // 清除第一个单击事件
    timeOut= setTimeout(function () {
        console.log('单击');
        // 单击事件的代码执行区域
        // ...
    }, time)
}
function double (e) {
    clearTimeout(timeOut); // 清除第二个单击事件
    console.log('双击')
    // 双击的代码执行区域
    // ...
}