使用Leaflet的Locate Control插件获取用户坐标的正确方法是什么？

错误根因 #

你初始化Locate Control时传入的layer: startMarker取的是变量初始化时的值undefined，插件不会自动反向给该变量赋值，因此后续判断startMarker == null会始终触发。

正确实现方案 #

1. 调整定位控件初始化逻辑，监听定位事件获取坐标 #

var lc = L.control.locate({
    position: "topright",
    drawCircle: false,
    showPopup: false,
    markerClass: L.marker,
}).addTo(mymap);
var startMarker;
// 监听定位成功事件，给startMarker赋值
mymap.on('locationfound', function(e) {
    // 清除之前的旧标记
    if (startMarker) mymap.removeLayer(startMarker);
    startMarker = L.marker(e.latlng).addTo(mymap);
});
// 可选：监听定位失败给出提示
mymap.on('locationerror', function(e) {
    alert("定位失败：" + e.message);
});

2. 优化按钮点击逻辑，避免未定位直接提交 #

$("button").on("click", (e) => {
    e.preventDefault();
    if (!startMarker) {
        // 未定位时主动触发定位
        lc.start();
        alert("正在获取定位，请稍后再提交");
        return;
    }
    $.ajax({
        type: "POST",
        data: {
            startlat: startMarker.getLatLng().lat,
            startlng: startMarker.getLatLng().lng,
        },
        url: "php/find_nearest_path.php",
        dataType: "json",
        success: dosomething,
        error: function () {
            alert("获取服务器响应失败");
        },
    });
});

如果不想自行维护startMarker变量，也可以直接读取定位控件实例的内置属性lc._marker获取当前定位标记，更推荐通过事件监听的方式处理，兼容性更好。

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