Leaflet如何从本地外部文件加载标记弹窗并规避CORS错误

完全可行。GeoJSON是专门为地理类数据设计的标准化格式，非常适合存储带附加信息的点位标记：你可以把每个标记的坐标存在geometry字段，把弹窗的标题、正文、甚至自定义图标样式等配置全存在properties字段里，后续维护、和其他地理工具兼容都很方便。
标准的存储示例如下：

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [116.404, 39.915]
      },
      "properties": {
        "popupTitle": "天安门",
        "popupContent": "北京市中心核心地标",
        "iconType": "scenic"
      }
    }
  ]
}

注意：GeoJSON点位坐标顺序为「经度, 纬度」，和Leaflet初始化用的[纬度, 经度]顺序相反，写的时候不要搞反。

本地加载GeoJSON规避CORS报错的方法 #

直接用file://协议双击打开HTML文件时，浏览器默认的安全策略会拦截本地文件的异步请求，触发CORS报错，用下面几个方法就能解决：

• 本地启动静态服务（最推荐，零业务代码改动）：不需要配置复杂的服务环境，如果你本地有Node.js，在项目根目录执行npx serve .即可；如果装了Python3，执行python -m http.server 8080，之后通过http://localhost:8080访问页面即可，此时所有同目录静态资源走HTTP协议加载，不会触发CORS。
• 把GeoJSON改为JS变量引入：把GeoJSON内容赋值给一个全局JS变量，存为独立的.js文件，比如marker-data.js中写const markerGeoData = { /* 你的GeoJSON完整内容 */ }，之后在HTML中通过<script src="./marker-data.js"></script>直接引入，代码里直接读取markerGeoData变量即可，完全不需要发异步请求，从根源上避免跨域问题。
• 临时调试可以直接把GeoJSON内容内嵌到主JS文件中，不过不符合你拆分独立文件的需求，不推荐正式使用。

加载完成后，直接用Leaflet自带的geoJSON方法批量生成标记、绑定弹窗即可，示例代码：

// 异步加载本地GeoJSON文件的写法
fetch('./markers.geojson')
  .then(res => res.json())
  .then(data => {
    L.geoJSON(data, {
      onEachFeature: (feature, layer) => {
        // 读取properties中的内容拼接弹窗
        layer.bindPopup(`
          <h4>${feature.properties.popupTitle}</h4>
          <div>${feature.properties.popupContent}</div>
        `)
      }
    }).addTo(map)
  })

// 如果是script引入JS变量的写法，直接传变量即可，不需要fetch
// L.geoJSON(markerGeoData, {/* 同上的onEachFeature配置 */}).addTo(map)

• 自定义JSON/JS数组存储：不需要严格遵循GeoJSON的格式规范，你可以自己定义数据结构，比如直接存成点位对象数组[{lng: 116.404, lat: 39.915, title: '天安门', content: '...'}]，加载后遍历数组手动调用L.marker创建标记、绑定弹窗，灵活度更高，适合不需要和其他地理工具做数据交换的场景。
• CSV文件存储：如果点位数据是表格形式整理的，可以存为CSV文件，列分别对应经度、纬度、弹窗标题、弹窗内容等字段，加载后用轻量CSV解析工具转成JS数组再批量生成标记即可，对非技术人员更友好，直接改表格就能更新点位，不需要懂JSON语法。
• 矢量瓦片方案：如果点位量级超过1万条，直接加载全量GeoJSON会有性能问题，可以把数据处理成矢量瓦片做按需加载，不过这个方案配置复杂度高，普通几百上千点位的场景完全没必要用。

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