时间戳

首页 > 解决方案 > 将包含数组的数组中的数据映射到组件中

reactjs - 将包含数组的数组中的数据映射到组件中

问题描述

我有一些来自 api 的大数据 - https://onet.sci.gsfc.nasa.gov/api/v2.1/events

我想将坐标映射到 React Leaflet 中的一个组件中，该组件在地图上显示一个标记。

<Marker position={[LAT, LON]} />

下面数据中的每个坐标都有一个坐标——coordinates: [LAT, LON]

我的数据

[
  {
    id: 'EONET_5165',
    title: 'Tropical Cyclone Gati',

    geometries: [
      {
        date: '2020-11-21T18:00:00Z',
        type: 'Point',
        coordinates: [55.5, 10.8],
      },
      {
        date: '2020-11-22T00:00:00Z',
        type: 'Point',
        coordinates: [53.8, 10.6],
      },
      {
        date: '2020-11-22T06:00:00Z',
        type: 'Point',
        coordinates: [52.5, 10.3],
      },
      {
        date: '2020-11-22T12:00:00Z',
        type: 'Point',
        coordinates: [51.5, 10.4],
      },
    ],
  },
{
    id: 'EONET_4445',
    title: 'Tropical Cyclone Susan',

    geometries: [
      {
        date: '2020-11-21T18:00:00Z',
        type: 'Point',
        coordinates: [55.5, 10.8],
      },
      {
        date: '2020-11-22T00:00:00Z',
        type: 'Point',
        coordinates: [53.8, 10.6],
      },
}
]

我需要映射每个事件并为每个坐标显示一个标记

这是我尝试过的最新方法。它给出了一个错误，因为位置为空。

{events.map((evt) => (
        <Marker
          position={[
            evt.geometries.map((g) => g.coordinates[1]),
            evt.geometries.map((g) => g.coordinates[0]),
          ]}
        />
      ))}

我也尝试将每个坐标数组映射到，但这导致我将所有 lat 和 long 传递到参数中。

我为这个模糊的问题道歉。

标签： reactjsreact-leaflet

解决方案

可以尝试类似的东西

{events.map((evt) => (
       evt.geometries.map(geo=>(
            <Marker
               position={[
                 geo.coordinates[1],
                 geo.coordinates[0]
                   ]}
              />
        ))
    
  ))}

推荐阅读