我无法让标记显示在地图上（React-leaflet.js）答案

【问题标题】：I can't get the markers to show up on the map(React-leaflet.js)我无法让标记显示在地图上（React-leaflet.js）
【发布时间】：2019-04-19 09:50:14
【问题描述】：

我从 TFL 的 API 获得了所有自行车积分的“lat”和“lng”。我正在尝试将所有自行车点显示为 React 传单地图上的标记。

我已成功获取数据并将其过滤为正确的格式 [51.505, -0.09] 并将每一个映射到标记上

component <Marker  position={data.position} /> .

问题是地图上没有显示标记。

我对一些数据进行了硬编码，它可以正常工作，所以我不明白我对实时数据做错了什么。如果有人可以帮助我，我将不胜感激？我整晚都被困在这上面。

这是我在 Jsfiddle 中的问题：

Problem on jsfiddle!

【问题讨论】：

标签： leaflet mapping react-leaflet

【解决方案1】：

这里有一个错字，你需要返回元素（更多细节请参考Lists and Keys docs）：

{this.state.bikeMarkers.map(data => {
    return <Marker position={data.position}></Marker>
    ^^^^^^
    missing
})}

filterData 函数在提供的示例中看起来是多余的，首先可以像这样检索和过滤数据：

axios.get(`https://api.tfl.gov.uk/bikepoint`).then(res => {
  let markers = res.data.map(location => {
    return { key: location.id, position: [location.lat, location.lon] };
  });

  this.setState({
    bikeMarkers: markers
  });
});

Updated jsFiddle

【讨论】：

非常感谢您对 Vadmin 的帮助。 :D