Mapbox地图未渲染仅显示指针 代码错误排查求助

代码问题清单 #

• 经度属性拼写错误：successLocation函数内获取经度的属性名拼写错误，正确属性为longitude，你的代码写为longtitude，导致传入的中心坐标无效，地图无法正常渲染。
• 定位失败无兜底逻辑：errorLocation函数为空，当用户拒绝定位权限、设备定位失败时，不会触发地图初始化逻辑。
• 地图初始化缺少缩放参数：Mapbox构造函数未指定zoom参数，默认缩放等级为0（全球视角），也会导致看起来未加载出地图内容。

修正后完整JS代码 #

mapboxgl.accessToken = 'pk.eyJ1IjoiZGh0NzZkeThjIiwiYSI6ImNrdjd0Zm92cDF4aGMyb2wwenhtbWJidjUifQ.KUBtTY1kI2SOMFXkKeerWQ';

navigator.geolocation.getCurrentPosition(successLocation, errorLocation, {
    enableHighAccuracy: true
})

function successLocation(position) {
    console.log(position)
    setupMap([position.coords.longitude, position.coords.latitude])
}

function errorLocation() {
    // 定位失败时使用默认坐标，可按需替换为你需要的默认地点经纬度
    setupMap([116.4074, 39.9042])
}

function setupMap(center) {
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: center,
        // 配置合适的缩放等级
        zoom: 12
    });
}

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