Pigeon-maps的地图覆盖物/标记为何全部堆积在组件左上角边缘？

问题现象 #

基于Pigeon-maps实现地图点位功能时，按当前地图可视边界请求接口拿到全量点位数据，返回数据包含完整经纬度字段，鼠标悬停在覆盖物上时弹窗可正常展示接收到的坐标值，但所有地图覆盖物、标记全部堵塞堆积在Map组件的左上角边缘，无法渲染到对应坐标位置。

接口返回数据示例（经纬度为字符串格式）：

placeNames = [
  // 其余点位数据省略
  {
    location_id: '271918', 
    name: 'The Burren', 
    latitude: '53.04881', 
    longitude: '-9.139942', 
    num_reviews: '713',
    // 其余字段省略
  }
]

根本原因 #

Pigeon-maps的Overlay、Marker组件的anchor属性仅接收数值类型的经纬度数组，格式要求为[纬度数值, 经度数值]，组件不会自动转换字符串格式的坐标值。你传入的经纬度是接口返回的字符串类型，组件无法计算坐标对应的渲染偏移量，所有覆盖物就会默认堆叠在地图容器的左上角原点位置。

修复方案 #

只需要在给anchor属性传值时，将经纬度从字符串转为数字类型即可，修改后的核心代码如下：

<Map provider={maptilerProvider} height={'85vh'} center={coordinates} zoom={zoom}
  onBoundsChanged={({ center, zoom, bounds }) => {
    setCoordinates(center)
    setZoom(zoom)
    setBounds(bounds)
  }}
>
  {isLoading ? <div>Loading</div> : placeNames?.map((pla, i) => (
    <div key={i}>
      {/* 核心修改：将字符串格式的经纬度转为Number类型传入 */}
      <Overlay anchor={[Number(pla.latitude), Number(pla.longitude)]}>
        <div 
          onClick={() => setIconClicked(i)} 
          onMouseOver={() => setVisible(i)} 
          onMouseLeave={() => setVisible(100)}
        >
          <MdLocalHotel />
          {visible === i &&
            <div className='bg-yellow-100 rounded-lg p-1 font-bold px-1 text-xs'>
              {pla.name}
              <div className='text-gray-700 text-right font-medium pt-0.5'>
                Latitude: {pla.latitude} Longitude: {pla.longitude}
              </div>
            </div>
          }
        </div>
      </Overlay>
    </div>
  ))}
</Map>

可选优化 #

可以在接口拿到点位数据后第一时间统一做格式转换，避免渲染时重复处理：

// 接口响应处理逻辑
const res = await fetchMapPointApi(bounds)
const formattedPlaceList = res.data.map(item => ({
  ...item,
  latitude: Number(item.latitude),
  longitude: Number(item.longitude)
}))
setPlaceNames(formattedPlaceList)

修改完成后所有覆盖物就会正常渲染到对应的坐标位置。

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