react-map-gl运行报@math.gl/web-mercator断言失败错误如何解决

问题根因 #

该报错是因为给Marker组件传入了无效经度值，触发了@math.gl/web-mercator库内部的经纬度合法性校验断言。

你代码中存在拼写错误：<Marker>组件的longitude属性绑定了不存在的p.ling字段，值为undefined，经纬度转换时直接触发校验失败。而同一份数据在下方<Popup>组件中绑定的是正确的p.long字段，可直接对照修正。

修复方案 #

找到代码中Marker组件的定义，将longitude={p.ling}修改为longitude={p.long}即可，修改后对应代码片段如下：

<Marker 
  latitude={p.lat} 
  longitude={p.long} 
  offsetLeft={-20} 
  offsetTop={-10}>
  <RoomIcon style={{ fontSize: viewport.zoom *7, color:"slateblue"}}/> 
</Marker>

拓展校验方案（可选） #

如果后续还出现同类报错，可增加数据合法性过滤，避免空值/无效值传入地图组件：

{/* 仅渲染经纬度都有有效值的点位 */}
{Pins.filter(p => typeof p.lat === 'number' && typeof p.long === 'number').map(p => (
  // 原有Marker、Popup渲染逻辑
))}

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