Leaflet中如何实现点击标记点位并保存其坐标几何信息？

实现步骤 #

1. 首先在全局作用域声明用于存储选中点位几何信息的数组：

// 存储选中点位的几何信息，可在全局任意位置调用
const selectedPointGeometries = []

2. 修改你的onEachFeature函数，为每个点位图层绑定点击事件，同时增加选中状态区分逻辑：

function onEachFeature (feature, layer) {
    // 保留原有弹窗逻辑，修正了原代码中多余的闭合b标签
    const popupContent = "<b>Provider: </b>" + feature.properties.provider + '<br/>' + "<b>Battery level: </b>" + feature.properties.battery;
    layer.bindPopup(popupContent);

    // 绑定点击选中/取消选中事件
    layer.on('click', function () {
        // 可根据需求存储完整GeoJSON几何对象，或仅存储坐标
        const targetGeometry = feature.geometry
        // 判断当前点位是否已被选中
        const selectedIndex = selectedPointGeometries.findIndex(item => {
            // 若点位有唯一ID，优先用ID判断，这里用坐标作为兜底判断条件
            return item.coordinates.toString() === targetGeometry.coordinates.toString()
        })

        if (selectedIndex > -1) {
            // 已选中状态点击：从数组移除，恢复默认样式
            selectedPointGeometries.splice(selectedIndex, 1)
            layer.setStyle({ fillColor: '#3388ff' }) // 替换为你的点位默认填充色
        } else {
            // 未选中状态点击：加入数组，切换为选中高亮样式
            selectedPointGeometries.push(targetGeometry)
            layer.setStyle({ fillColor: '#ff4444' }) // 替换为你想要的选中高亮色
        }
        // 调试用：控制台打印当前选中的几何信息，不需要可以删除
        console.log('已选中点位：', selectedPointGeometries)
    })
}

可选调整说明 #

• 如果只需要存储点位的经纬度坐标，把targetGeometry = feature.geometry改为targetGeometry = feature.geometry.coordinates即可
• 若你的点位数据有唯一标识字段（如feature.properties.id），可将判断重复的逻辑替换为ID匹配，避免坐标重复导致的判断错误
• 后续需要导出/提交选中点位时，直接读取selectedPointGeometries数组即可

内容的提问来源于stack exchange，提问作者Anas.S