Leaflet调用geoNames接口添加marker时报reading 'lat'空值错误

AI 小北

2026-10-2

问题根因

你遇到的报错本质是调用createMarker创建Leaflet标记时，传入的经纬度值为null/undefined，或者格式非法，Leaflet内部处理坐标投影时无法读取合法的lat属性触发报错。

修复步骤

1. 增加数据合法性校验

你当前的代码没有对接口返回的POI数据做有效性校验，部分geoNames返回的POI条目可能缺失经纬度字段，或返回字符串格式的经纬度，直接传入创建标记就会触发错误。将AJAX请求的success逻辑替换为以下代码：

success: function(resultNearWiki) {
    if (resultNearWiki.status.name === "ok") {
        // 清空图层组避免重复添加标记
        markerLayerGroup.clearLayers();
        // 兼容接口返回异常的场景，取不到poi时默认赋值空数组
        const nearWikiArray = resultNearWiki?.data?.poi || [];
        nearWikiArray.forEach(poiItem => {
            // 转换经纬度为数值类型，同时校验有效性
            const lat = Number(poiItem.lat);
            const lng = Number(poiItem.lng);
            const name = poiItem.name || '未知点位';
            const typeName = poiItem.typeName || '未知类型';
            // 仅经纬度为合法数值时才创建标记
            if (!isNaN(lat) && !isNaN(lng)) {
                createMarker(lat, lng, name, typeName);
            }
        })
        markerLayerGroup.addTo(map);
    }
}

2. 检查createMarker函数实现

确认你的createMarker函数符合Leaflet的参数要求，正确将经纬度传入标记构造函数，参考实现如下：

function createMarker(lat, lng, name, typeName) {
    // Leaflet要求经纬度以[纬度, 经度]的数组格式传入
    const marker = L.marker([lat, lng]).addTo(markerLayerGroup);
    // 可选：绑定弹出窗
    marker.bindPopup(`<b>点位名称：${name}</b><br>点位类型：${typeName}`);
}