在 React 中将 45k 元素填充到属性中的正确方法

Question

我有 45k 个 JSON 格式的坐标对象，我想将它们作为标记放在我的地图组件中。

我有以下代码：

const MapWithMarkers = withGoogleMap(props =>GoogleMap
    defaultZoom={8}
    defaultCenter={{ lat: -34.397, lng: 150.644 }}
  >
    <Marker
      position={{ lat: -34.397, lng: 150.644 }}
    />
  </GoogleMap>
);

<MapWithAMarker
  containerElement={<div style={{ height: '400px' }} />}
  mapElement={<div style={{ height: '100%' }} />}
/>

如何以最正确的方式实现？

感谢您的宝贵时间。

Answer 1

将数据作为 prop 传递到 map 组件中，然后在 map 组件中，从 props 和 .map 中获取数据，并为每个条目生成一个标记。

<GoogleMap>

        {
            (props.markerData).map((marker, i) => {return <Marker key={i} position={{ lat: parseFloat(marker.lat), lng: parseFloat(marker.lng) }} />})
        }

</GoogleMap>

在 React 中将 45k 元素填充到属性中的正确方法

Correct way to populate 45k elements into attribute in React

javascript

google-maps

reactjs

react-google-maps