Question

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

2019-04-19

256

leaflet mapping react-leaflet

我从 TFL 的 API 中获取了所有自行车点的“纬度”和“经度”。我试图将所有自行车点显示为 React-leaflet 地图上的标记。

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

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

问题是标记未显示在地图上。

我已经对一些数据进行了硬编码，并且它可以工作，所以我不明白我对实时数据做错了什么。如果有人能帮助我，我将不胜感激？我整晚都困在这个问题上。

这是我在 Jsfiddle 中遇到的问题：

jsfiddle 上的问题！

Answer 1

这里有一个拼写错误，您需要返回元素（有关更多详细信息，请参阅列表和键文档）：

{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
  });
});

更新的 jsFiddle