如何在 Leaflet 地图中精准获取并显示用户实时地理位置

// 在 map-detail.js 中更新 createDetailMap 函数

function createDetailMap(options) {

    const map = L.map(options.mapId).setView(options.mapCenter, options.mapZoom);

    // 添加底图（示例：使用 OpenStreetMap）

    L.tileLayer(https://{a-d}.tile.openstreetmap.org/{z}/{x}/{y}.png, {

        attribution: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors

    }).addTo(map);

    // 若启用圆形标注，则添加

    if (options.circleShow && options.circlePosition) {

        L.circle(options.circlePosition, { radius: 500 }).addTo(map);

    }

    // ? 关键：将 map 实例返回，便于后续调用

    return map;

}

<script>

    // 初始化地图并获取实例

    const map = createDetailMap({

        mapId: detailMap,

        mapZoom: 14,

        mapCenter: [-42.40916, 172.83898],

        circleShow: true,

        circlePosition: [-42.40916, 172.83898]

    });

    // ? 定位成功回调：添加标记与精度圈

    function onLocationFound(e) {

        const { latlng, accuracy } = e;

        const radius = accuracy || 10; // 精度半径（米），accuracy 可能为 0 或 undefined

        // 添加带弹窗的定位标记

        L.marker(latlng)

            .addTo(map)

            .bindPopup(`You are within ${radius} meters from this point`)

            .openPopup();

        // 可选：绘制精度圆圈（视觉化定位可信范围）

        L.circle(latlng, {

            radius: radius,

            color: #3498db,

            fillColor: #3498db,

            fillOpacity: 0.2

        }).addTo(map);

    }

    // ? 监听定位事件 & 主动触发定位

    map.on(locationfound, onLocationFound);

    map.on(locationerror, function (e) {

        console.warn(Geolocation error:, e.message);

        alert(Unable to retrieve your location. Please check browser permissions and try again.);

    });

    // ? 启动定位（自动缩放到合适层级，最大缩放至 16）

    map.locate({ setView: true, maxZoom: 16, enableHighAccuracy: true });

</script>