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

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

<GoogleMap>

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

</GoogleMap>

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

1 个答案: