如何通过外部JSON文件(B)填充JavaScript文件(A)中的markers数组？

这刚好是异步加载数据的典型场景，完全能满足你动态获取更新后标记数据的需求。下面给你一步步讲怎么实现：

第一步：准备外部JSON文件（文件B） #

把原来的markers数组单独存成一个JSON文件，比如命名为markers.json，内容格式要严格符合JSON规范（注意逗号、引号的使用，最后一项不要加多余逗号）：

[
  {"latLng": [3.2, 73.22], "name": "Maldives"},
  {"latLng": [35.88, 14.5], "name": "Malta"},
  {"latLng": [12.05, -61.75], "name": "Grenada"},
  {"latLng": [13.16, -59.55], "name": "Barbados"},
  {"latLng": [17.11, -61.85], "name": "Antigua and Barbuda"},
  {"latLng": [-4.61, 55.45], "name": "Seychelles"},
  {"latLng": [7.35, 134.46], "name": "Palau"}
]

第二步：修改JavaScript文件（文件A） #

因为你已经在使用jQuery，直接用它的$.getJSON方法来异步获取JSON数据，拿到数据后再初始化矢量地图。修改后的代码如下：

$(function(){ 
  // 重构initVMap函数，接收外部传入的标记数据
  function initVMap(markersData){
    $('#vmap').vectorMap({ 
      map: 'world_mill', 
      markers: markersData // 用外部获取的数据填充markers配置项
    }); 
  }

  // 异步加载外部JSON文件
  $.getJSON('markers.json')
    .done(function(data) {
      // 数据加载成功，调用初始化函数
      initVMap(data);
    })
    .fail(function(jqXHR, textStatus, errorThrown) {
      // 处理加载失败的情况（可选但推荐）
      console.error('标记数据加载失败:', textStatus, errorThrown);
      // 可以在这里设置一套默认标记数据兜底，避免地图完全无法显示
      const fallbackMarkers = [
        {latLng: [3.2, 73.22], name: 'Maldives'}
      ];
      initVMap(fallbackMarkers);
    });
});

几个需要注意的细节 #

• 路径正确性：确保markers.json的路径和你的JS文件对应，如果JSON文件在子目录（比如./data/markers.json），要写对相对路径；如果是线上环境，也可以写完整的URL（比如https://your-domain.com/markers.json）。
• 跨域问题：如果你的页面和JSON文件不在同一个域名/端口下，会遇到浏览器的跨域限制。这种情况需要在服务器端配置CORS（跨域资源共享）规则，或者把JSON文件放到和页面相同的域名下。
• 自动更新：之后只要更新markers.json里的内容，用户刷新页面就能加载到最新的标记数据，完全不需要修改你的JS代码，完美匹配你的需求。

内容的提问来源于stack exchange，提问作者Mr. Miyagi