如何使用Mapbox GL JS实现用户位置实时显示与跟踪功能

可行实现方案 #

方案1：基于现有GeolocateControl开启自动跟踪

你当前的配置参数没有问题，没有实现实时跟踪是因为GeolocateControl默认需要用户手动点击控件按钮才会启动定位，只要在控件添加完成后主动调用trigger()方法即可自动触发定位跟踪，代码示例如下：

const geolocate = new mapboxgl.GeolocateControl({
    positionOptions: {
        enableHighAccuracy: true,
        maximumAge: 0 // 禁用缓存定位，每次都拉取最新位置
    },
    trackUserLocation: true,
    showUserHeading: true,
    showAccuracyCircle: true // 展示定位精度范围圈，对齐移动端展示效果
});
map.addControl(geolocate);

// 地图加载完成后自动触发定位
map.on('load', () => {
    geolocate.trigger();
});

// 可选：监听位置更新事件实现自定义逻辑
geolocate.on('geolocate', (position) => {
    console.log('当前用户坐标：', position.coords.latitude, position.coords.longitude);
});

注意Web端原生限制：页面切换到后台标签页时，大部分浏览器会限制定位频率甚至停止定位更新，这个限制无法突破。如果是iOS Safari浏览器，必须要有用户主动交互（比如点击按钮）才能触发定位，否则会被权限拦截，这种场景可以加一个引导用户点击的按钮来触发geolocate.trigger()即可。

方案2：自定义用户位置图层（完全可控）

如果默认的GeolocateControl定位点样式不符合需求，你可以直接调用浏览器原生Geolocation API获取实时位置，自行在地图上添加图层渲染，完全自定义展示效果和逻辑，代码示例如下：

map.on('load', () => {
    // 初始化用户位置数据源
    map.addSource('user-location', {
        type: 'geojson',
        data: {
            type: 'FeatureCollection',
            features: []
        }
    });
    // 添加用户位置点位图层，可自行调整样式
    map.addLayer({
        id: 'user-location-point',
        type: 'circle',
        source: 'user-location',
        paint: {
            'circle-radius': 8,
            'circle-color': '#4285F4',
            'circle-stroke-width': 2,
            'circle-stroke-color': '#ffffff'
        }
    });
    // 开启持续定位监听
    navigator.geolocation.watchPosition((position) => {
        const coordinates = [position.coords.longitude, position.coords.latitude];
        // 更新点位数据
        map.getSource('user-location').setData({
            type: 'Feature',
            geometry: {
                type: 'Point',
                coordinates: coordinates
            },
            properties: {}
        });
        // 可选：自动将地图中心平移到用户当前位置
        map.easeTo({
            center: coordinates,
            duration: 1000
        });
    }, (error) => {
        console.error('定位失败：', error.message);
    }, {
        enableHighAccuracy: true,
        maximumAge: 0,
        timeout: 10000
    });
});

注意事项 #

所有Web端定位功能都要求页面使用HTTPS协议访问，本地localhost调试除外。如果出现定位无响应的情况，先检查浏览器的定位权限是否已经给当前页面开启。

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