点击PopupBox触发Invalid LatLng object: (NaN, 51.418428)报错如何解决

报错Invalid LatLng object: (NaN, 51.41842779999999)是Leaflet计算Popup弹窗定位坐标时，拿到了非法的NaN纬度值，由代码里3个写法问题共同导致：

• iconSize配置错误：代码写为iconSize: [item.size]，如果item.size本身是存储宽高的数组（比如[30,40]），套一层方括号后会变成二维数组，Leaflet解析图标尺寸时拿不到合法数值，计算弹窗锚点偏移量时生成NaN，最终拼定位坐标时把NaN传入LatLng对象触发报错。
• 点击事件绑定语法错误：JSX里写为onclick{this.handleClick}，既不符合React驼峰命名的事件规范，也缺少属性赋值的等号，点击触发时事件上下文异常，会干扰Popup的定位逻辑。
• 直接修改原数组：第一个map遍历直接修改原marker对象的属性，没有返回新对象，如果markers是state/props传入的只读不可变数据，会导致图标配置更新不同步，Popup挂载时关联的位置信息异常。

按以下步骤调整即可解决：

1. 修正iconSize传参：去掉额外嵌套的方括号，提前校验尺寸值，保证传入的是两个有效数值组成的一维数组。
2. 修正事件绑定写法：事件名改为驼峰格式onClick，补上等号完成属性赋值，必要时绑定正确的this上下文。
3. 避免直接修改原数组：遍历处理icon配置时返回新的marker对象，不直接修改原入参，适配React不可变数据的更新逻辑。
4. 增加坐标合法性校验：渲染Marker前过滤掉坐标值非数值、为NaN的无效点位，避免脏数据触发报错。
5. 补充列表渲染的key属性，避免React列表复用节点导致的组件状态异常。

修复后可运行代码如下：

renderMarkerArrays(markers) {
  // 遍历生成带icon配置的新marker数组，不修改原数组
  const formattedMarkers = markers.map(item => {
    // 兜底处理iconSize，保证是两个有效数值的一维数组
    const defaultSize = 24;
    const validIconSize = Array.isArray(item.size) 
      ? item.size 
      : [item.size || defaultSize, item.size || defaultSize];
    return {
      ...item,
      icon: L.icon({
        iconUrl: imgsIcon[item.type],
        iconSize: validIconSize,
        popupAnchor: [0, 50]
      })
    }
  })
         
  return formattedMarkers.map(element => {
    // 校验坐标合法性，过滤无效点位
    const [lat, lng] = element.position || [];
    if (typeof lat !== 'number' || typeof lng !== 'number' || isNaN(lat) || isNaN(lng)) {
      return null;
    }
    return (
      <Marker 
        key={`marker-${lat}-${lng}`}
        position={element.position} 
        icon={element.icon} 
        onClick={this.handleClick.bind(this)}
      >
        <Popup>
          {element.popup}
        </Popup>
      </Marker>
    )
  })
}

内容的提问来源于stack exchange，提问作者a.falahati