创建Mapbox地图报center未定义及Unexpected identifier错误如何解决

错误原因说明 #

你遇到的两个报错分别对应以下两处代码问题：

• 「Uncaught SyntaxError: Unexpected identifier」语法错误：mapboxgl.Map 构造函数的配置对象中，style 属性行末尾缺少英文逗号，JS 解析时无法识别后续的 center 属性，直接抛出语法异常。
• 「center parameter is not defined in creating a map」参数错误：存在两个触发点
  1. 经纬度属性拼写错误：代码中写的position.coords.longtitude是错误拼写，正确写法为position.coords.longitude，拼写错误导致经度取值为undefined，传入的center参数不合法
  2. 缺少权限拒绝兜底逻辑：如果用户拒绝位置授权，successLocation 不会执行，setupMap 没有拿到合法的center参数

修复后的完整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: 15 // 补充默认缩放层级，适配定位场景
    });
    // 可选：添加定位标记点，更直观展示当前位置
    new mapboxgl.Marker()
      .setLngLat(center)
      .addTo(map)
}

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