如何访问HTML中加载的JSON值并提取坐标用于Mapbox标记绘制

云上老周

2026-10-5

你现有代码存在以下几个问题，修复后即可正常运行：

重复解析JSON
你调用callback(JSON.parse(xobj.responseText))的时候已经把响应内容转成了JS对象，回调函数里又执行了一次var actual_JSON = JSON.parse(json);，相当于给已经是对象的内容再次做JSON解析，会直接抛出错误，把这一行的JSON.parse()去掉，改成var actual_JSON = json;即可。
跨域&文件路径问题
你当前用的是本地绝对路径C:\Users\ArkPr\yelp\restaurants.json，浏览器出于同源策略限制，直接打开本地HTML文件时无法读取本地磁盘的JSON文件。你可以把restaurants.json放在和HTML文件同目录下，请求路径改成相对路径./restaurants.json，同时建议用本地静态服务器启动项目，避免跨域报错。
异步逻辑顺序错误
XMLHttpRequest是异步请求，标记渲染的for循环必须写在loadJSON的回调函数内部，否则外部代码执行时请求还没返回，actual_JSON还未完成赋值，会抛出变量未定义的错误。同时你现有代码的回调函数缺少闭合的花括号，需要补全。
JSON键名校验
你给出的JSON结构里根节点的type是featurecollections，如果后续你要按标准GeoJSON规范使用的话，注意标准键名是首字母大写的FeatureCollection，如果你的实际JSON键名就是全小写，确认和代码里的访问路径一致即可。

另外需要确保这段代码执行的时候，Mapbox的map实例已经完成初始化，避免addTo(map)时找不到map对象。

修复后的完整代码参考：

function loadJSON(callback) {   
  var xobj = new XMLHttpRequest();
  xobj.overrideMimeType("application/json");
  // 替换为相对路径
  xobj.open('GET', './restaurants.json', true);
  xobj.onreadystatechange = function () {
    if (xobj.readyState == 4 && xobj.status == "200") {
      callback(JSON.parse(xobj.responseText));
    }
  };
  xobj.send(null);  
}

loadJSON(function(json) {
  // 去掉重复的JSON.parse
  var actual_JSON = json; 
  // 把标记循环放在回调内部
  for (const { geometry, properties } of actual_JSON.features) {
    const el = document.createElement('div');
    el.className = 'marker';
    new mapboxgl.Marker(el).setLngLat(geometry.coordinates).addTo(map);
  }
});

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