HTML网站中Mapbox地图实现默认显示当前位置且可调整的位置选择器

核心逻辑 #

• 关闭原定位控件的持续追踪功能，避免拖拽标记时被自动拉回实时位置
• 新增可拖拽的红色标记作为定位点，成功获取用户实时位置后自动对齐到当前位置
• 标记拖拽结束时自动采集最终经纬度，同步在页面上展示，可直接对接后续提交逻辑
• 保留原定位按钮的单次跳转能力，不干扰用户手动调整操作

关键修改点 #

• 将GeolocateControl的trackUserLocation参数从true改为false：原参数开启后会持续跟随用户位置更新视图，完全阻断手动调整流程，关闭后仅保留单次点击定位的能力
• 创建带draggable: true属性的Marker作为可拖拽定位点，替代原本仅用于展示的定位图层
• 绑定GeolocateControl的定位成功回调，在获取到用户坐标时自动将标记移动到对应位置
• 监听Marker的dragend事件，实时更新用户调整后的经纬度存储值

完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Locate the user</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
#selected-location {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    background: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
</style>
</head>
 <body>
<div id="map"></div>
<div id="selected-location">当前选中位置：-96, 37.8</div>
<script>
    mapboxgl.accessToken = 'pk.eyJ1IjoicmVldDA3IiwiYSI6ImNrZnhwd2k4NTJxcjIyeXBhdmlhZXViMGkifQ.RpDVVS8IaoOn3srMpLmS8w';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-96, 37.8],
    zoom: 3
});

// 存储用户最终选定的坐标
let selectedLngLat = {
    lng: -96,
    lat: 37.8
};

// 创建可拖拽的定位标记
const locationMarker = new mapboxgl.Marker({
    draggable: true,
    color: '#d32f2f'
})
.setLngLat([selectedLngLat.lng, selectedLngLat.lat])
.addTo(map);

// 标记拖拽结束时更新选中坐标
locationMarker.on('dragend', () => {
    selectedLngLat = locationMarker.getLngLat();
    document.getElementById('selected-location').innerText = 
        `当前选中位置：${selectedLngLat.lng.toFixed(6)}, ${selectedLngLat.lat.toFixed(6)}`;
});

// 初始化定位控件
const geolocateControl = new mapboxgl.GeolocateControl({
    positionOptions: {
        enableHighAccuracy: true
    },
    // 关闭持续位置追踪
    trackUserLocation: false
});
map.addControl(geolocateControl);

// 定位成功时自动对齐标记到用户实时位置
geolocateControl.on('geolocate', (e) => {
    const userLng = e.coords.longitude;
    const userLat = e.coords.latitude;
    selectedLngLat = {lng: userLng, lat: userLat};
    locationMarker.setLngLat([userLng, userLat]);
    map.flyTo({
        center: [userLng, userLat],
        zoom: 16
    });
    document.getElementById('selected-location').innerText = 
        `当前选中位置：${selectedLngLat.lng.toFixed(6)}, ${selectedLngLat.lat.toFixed(6)}`;
});
 </script>
 </body>
 </html>

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