如何遍历JSON文件实现Leaflet地图标记无刷新实时更新

• 现有每5秒更新一次的coords.json文件存储监控对象位置坐标，基于Leaflet开发内部使用的坐标点位标注地图
• 原有PHP渲染方案运行正常，但必须刷新页面才能同步最新坐标，需要实现无页面刷新、JSON变更时自动更新地图标记的效果
• 持有的coords.json结构如下，coords字段下为数字键名的坐标对象，条目数量会随监控对象总数动态增减：

{
    "coords": {
        "1": {
            "x": 21249,
            "y": 7135
        },
        "2": {
            "x": 21249,
            "y": 7125
        },
        "3": {
            "x": 21244,
            "y": 7140
        }
    }
}

• 原有可正常运行的PHP代码逻辑为读取JSON后循环输出标记创建语句：

<?php
$count = 0;
$str = file_get_contents('coords.json');
$json = json_decode($str, true);

foreach($json['coords'] as $coords)  {
  $count++;
  ${'yCord_'.$count} = $coords['y'];
  ${'xCord_'.$count} = $coords['x'];
};

for ($i = 1; $i <= $count; $i++) {
  echo  "L.marker([" . ${'xCord_'.$i} . "," . ${'yCord_'.$i} . "], {icon: icon_door}).addTo(map);";
}
?>

• 自行编写的JS代码无法正确读取JSON数据，核心问题是网上教程对应的JSON结构和持有的文件结构不匹配。

原有JS代码存在三个核心错误：

1. coords字段是对象类型，不是数组，不存在length属性，无法用数组下标循环的方式遍历
2. 取值路径错误，坐标条目存储在json1.coords字段下，直接读取json1[i]拿不到对应数据
3. 没有旧标记清理逻辑，轮询更新时会重复叠加标记，导致地图上标记越来越多

整体逻辑为：初始化独立的标记图层组统一管理所有点位，设置定时器每5秒请求一次最新的JSON文件，每次更新前先清空图层内的旧标记，再遍历新的坐标数据绘制新标记，即可实现无刷新实时更新效果。
完整实现代码如下：

// 初始化地图后，单独创建标记图层组，方便后续统一清理、管理点位
const markerLayer = L.layerGroup().addTo(map);

// 提前定义点位图标，无需每次循环重复创建
const customIcon = L.icon({
    iconUrl: './icon_door.png', // 替换为你本地的门点图标路径即可
    iconSize: [38, 40],
    iconAnchor: [10, 40],
    popupAnchor: [5, -40]
});

// 点位更新函数
function updateMapMarkers() {
    // 先清空图层内所有旧标记，避免重复叠加
    markerLayer.clearLayers();

    // 请求最新坐标文件，加时间戳参数避免浏览器缓存返回旧数据
    $.getJSON(`coords.json?t=${Date.now()}`, function(res) {
        // 用Object.values直接取出coords下所有坐标对象组成数组，无需关心数字键名
        const allCoords = Object.values(res.coords);
        // 遍历坐标数组绘制标记，添加到专属图层组
        allCoords.forEach(point => {
            // 坐标顺序和原有PHP逻辑保持一致，避免点位偏移
            L.marker([point.x, point.y], {icon: customIcon}).addTo(markerLayer);
        })
    })
}

// 页面首次加载时先执行一次，绘制初始点位
updateMapMarkers();
// 每5秒执行一次更新，和JSON文件的更新频率对齐
setInterval(updateMapMarkers, 5000);

注意事项 #

• 如果你的坐标是标准经纬度，注意Leaflet标记的坐标顺序为[纬度, 经度]，如果原有PHP逻辑的x/y顺序已经验证点位准确，直接沿用原有顺序即可，无需调换
• 时间戳参数是为了避免浏览器缓存JSON文件导致更新不及时，如果你的服务端已经配置了JSON文件不缓存，可以去掉该参数
• 用独立图层组管理标记，后续需要给点位加弹窗、做点位筛选时不需要改动核心更新逻辑，直接在遍历绘制时加对应配置即可

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