Leaflet 基础知识点- 鼠标点击事件获取坐标点

一、方式一

// 监听 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正是下侧
});
 
// 添加

删除

map.removeLayer(remark);

三、属性 iconAnchor 说明

• 图片做位移，原点在左上角。
• 添加图片时，默认图片左上角为该坐标点位置。