如何使用JS文件为Leaflet地图添加首都城市标记？

先梳理现有问题 #

• 你当前写的AJAX代码存在多处逻辑错误：请求静态JSON数据不需要用POST方法、不需要传data参数、$('CapitalLatitude', 'CapitalLongitude' ).val() 是无效的DOM选择器，没有对应元素可以取到值
• 你的capitalCities.js是带变量声明的JS文件，不是纯JSON格式，直接设置dataType为json会解析失败
• 单独声明的capitalCityLat、capitalCityLon没有必要，你需要遍历所有首都数据批量创建标记，不需要两个全局变量存储单个坐标

最佳实现方案（优先推荐，无需AJAX） #

直接通过script标签引入capitalCities.js，即可直接使用文件里声明的capitals全局变量，操作成本最低：

1. 在HTML中引入JS文件，注意引入顺序要在你自己的业务JS文件之前

<!-- 先引入Leaflet核心资源，再引入首都数据JS，最后引入你自己的业务JS -->
<script src="js/capitalCities.js"></script>

2. 在你的业务JS中遍历数据添加标记到已有图层

// 请将下方的capitalLayer替换为你自己提前创建的Leaflet图层变量名
capitals.forEach(capitalItem => {
  // 原始数据中经纬度是字符串格式，需要转为数字
  const lat = Number(capitalItem.CapitalLatitude)
  const lng = Number(capitalItem.CapitalLongitude)
  // 创建标记，可绑定弹窗显示首都、国家信息
  const marker = L.marker([lat, lng])
    .bindPopup(`<b>首都：${capitalItem.CapitalName}</b><br>所属国家：${capitalItem.CountryName}`)
  // 加入已有图层
  marker.addTo(capitalLayer)
})

备选方案：通过AJAX请求加载 #

如果你一定要用AJAX实现，需要先调整数据文件格式，再修改请求逻辑：

1. 将capitalCities.js重命名为capitalCities.json，删除文件开头的let capitals = ，补全数组末尾的]，保存为纯JSON格式
2. 修改AJAX代码如下：

$.ajax({
  url: "js/capitalCities.json",
  type: 'GET', // 静态资源请求用GET即可
  dataType: 'json',
  success: function(capitals) {
    // 遍历逻辑和上述方案完全一致
    capitals.forEach(capitalItem => {
      const lat = Number(capitalItem.CapitalLatitude)
      const lng = Number(capitalItem.CapitalLongitude)
      const marker = L.marker([lat, lng])
        .bindPopup(`<b>首都：${capitalItem.CapitalName}</b><br>所属国家：${capitalItem.CountryName}`)
      marker.addTo(capitalLayer)
    })
  },
  error: function(err) {
    console.error('首都数据加载失败', err)
  }
})

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