Google-Maps-React无法渲染标记数组 NASA野火API数据加载后标记不显示

核心问题原因 #

• 1. 坐标顺序颠倒：NASA EONET API返回的geometry[0].coordinates数组遵循GeoJSON标准，顺序为[经度, 纬度]，而google-map-react要求传入的lat参数为纬度、lng参数为经度。你当前将坐标数组第一位赋值给lat、第二位赋值给lng，所有标记的坐标完全错误，大多落在地图可视范围外，自然无法显示。
• 2. 自定义Marker没有设置尺寸：你写的Marker组件对应的div仅设置了背景色，没有声明宽高，渲染出来的是0尺寸元素，就算坐标正确也看不到。

修复方案 #

1. 调整坐标赋值顺序，将coordinates[1]赋值给lat，coordinates[0]赋值给lng
2. 给Marker组件的div添加宽高样式

修复后的代码片段 #

Marker组件修复

const Marker = (props: any) => {
  const { color, name } = props;
  return (
      <div className="marker"
        style={{ 
          backgroundColor: color, 
          cursor: 'pointer',
          // 可根据需求调整尺寸、样式
          width: '10px',
          height: '10px',
          borderRadius: '50%'
        }}
        title={name}/>
    )
};

标记渲染坐标调整

{props.wildfires.map((w:any, i:any)=><Marker
    key={w.id}
    // 调整坐标顺序
    lat={w.geometry[0].coordinates[1]}
    lng={w.geometry[0].coordinates[0]}
    name={w.title}
    color="red"
  />
)}

原生Google Maps Marker方法修复（可选）

如果要启用注释掉的renderMarkers方案，同样调整坐标顺序即可：

const renderMarkers = (map: any, maps: any, wildfires: any) => {
  for(const item of wildfires){
    let marker = new maps.Marker({
      // 调整坐标顺序
      position: {lat: item.geometry[0].coordinates[1], lng: item.geometry[0].coordinates[0]},
      map,
      title: 'My Marker'
    });
  }
}

注：代码中未使用的points数组如果后续需要调用，也要同步调整坐标赋值顺序。

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