Mapbox地图无法在历史帖子中显示的问题求助

问题根源 #

新发布的帖子中，campground.geometry.coordinates是数组类型，前端可直接用于Mapbox的center和setLngLat配置；但历史帖子的coordinates是字符串格式的数组（例如 "[116.397, 39.908]"），直接传递给Mapbox会导致识别失败，且对数组执行JSON.parse会抛出语法错误。

前端临时兼容方案 #

修改mapShowPage.js代码，统一处理两种格式的坐标数据：

mapboxgl.accessToken = mapToken;
// 判断坐标类型，字符串则解析为数组，数组直接复用
const coordinates = typeof campground.geometry.coordinates === 'string' 
  ? JSON.parse(campground.geometry.coordinates) 
  : campground.geometry.coordinates;

const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v12',
    center: coordinates,
    zoom: 9,
});

new mapboxgl.Marker()
    .setLngLat(coordinates)
    .addTo(map);

后端永久修复方案 #

直接修正数据库中的历史数据，将字符串格式的坐标转为数组类型（以MongoDB为例）：

// MongoDB批量更新脚本，根据实际数据库表名调整
db.campgrounds.updateMany(
  { "geometry.coordinates": { $type: "string" } },
  [
    { 
      $set: { 
        "geometry.coordinates": { $jsonParse: "$geometry.coordinates" } 
      } 
    }
  ]
);

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