Google-Maps-React 不会显示标记数组

Question

我不明白为什么这不会显示来自 NASA api 的野火数据。纬度和经度是正确的，我可以使用标记组件使单个标记出现在屏幕上，而不是野火事件数组。为什么这些标记不显示？数组中有300多个元素

import GoogleMapReact from 'google-map-react';
import { useSelector } from 'react-redux';


function App() {
  const wildfires = useSelector((state: any)=>state.wildfires);
  console.log(wildfires);
  return (
    <div className="App">
      <header className="App-header">
        Wildfires: {wildfires.length}
        <Map
        lat={41.000418}
        lng={-123.0483683}
        zoom={9}
        wildfires={wildfires}/>
      </header>
    </div>
  );
}

const Marker = (props: any) => {
  const { color, name } = props;
  const el = (
      <div className="marker"
        style={{ backgroundColor: color, cursor: 'pointer'}}
        title={name}/>
    )
  return (el)
};

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

const Map = (props: any) => {
  const loading = useSelector((state: any) => state.wildfiresLoading)
    const points = props.wildfires.map((w: any)=>{
      return {
        lat: w.geometry[0].coordinates[0],
        lng: w.geometry[0].coordinates[1]
      }
    })
    console.log(points);
    return (
      <div style={{ height: '100vh', width: '100%' }}>
        {!loading ? <GoogleMapReact
          bootstrapURLKeys={{ key: "AIzaSyAe3TSmPP1WlHUFrOUwnA-okBcB2DfH-BI"}}
          defaultCenter={{
              lat: props.lat,
              lng: props.lng
          }}
          yesIWantToUseGoogleMapApiInternals={true}
          defaultZoom={props.zoom}
          // onGoogleApiLoaded={({map, maps}) => renderMarkers(map, maps, props.wildfires)} //Sadly this didn't work
        >
          {props.wildfires.map((w:any, i:any)=><Marker
              key={w.id}
              lat={w.geometry[0].coordinates[0]}
              lng={w.geometry[0].coordinates[1]}
              name={w.title}
              color="red"
            />
          )}
        </GoogleMapReact> : <div>loading</div>}
      </div>
    );
}

// Api / Redux
import axios from 'axios'

export function getWildfires() {
    return function(dispatch: any) {
      dispatch(setWildfiresLoading(true));
      return axios.get("https://eonet.sci.gsfc.nasa.gov/api/v3/events?category=wildfires&status=open")
        .then(( res ) => {
        dispatch(setWildfires(res.data.events));
        dispatch(setWildfiresLoading(false));
      });
    };
  }
  export function setWildfires(wildfires: any) {
    return {
        type: "SET_WILDFIRES",
        payload: wildfires
    }
  }
  export function setWildfiresLoading(loading: Boolean) {
    return {
        type: "SET_WILDFIRES_LOADING",
        payload: loading
    }
  }
  
export const wildfireReducer = function (state = {wildfires: []}, action: any) {
    switch (action.type) {
        case "SET_WILDFIRES":
        return {
            ...state,
            wildfires: action.payload
        };
        case "SET_WILDFIRES_LOADING":
        return {
            ...state,
            wildfiresLoading: action.payload
        };
        default:
        return state;
    }
};

Answer 1

您的谷歌地图渲染的问题是您分配了lat 值而不是lng。在您的控制台中，您将收到如下错误，

NaN 是 left css 样式属性的无效值。

您必须更改渲染wildfires 列表，如下所示，

{ 
    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" />
)}

我创建了演示项目，而不是从 NASA's REST API 加载数据，我模拟了来自 NASA's api 响应的几个数据。

DEMO

Answer 2

将属性添加到 GoogleMapReact 标签：

onGoogleApiLoaded={({map, maps}) => renderMarkers(map, maps)}

创建函数renderMarkers：

const renderMarkers = (map, maps) => {
for(item of props.wildfires){
  let marker = new maps.Marker({
    position: {lat: item.geometry[0].coordinates[0], lng: item.geometry[0].coordinates[1]},
    map,
    title: 'My Marker'
  });
}
}