Question

我从TFL的API中获得了所有Bike Points的“ lat”和“ lng”。我正在尝试在React-leaflet地图上将所有Bike Points标记显示为标记。

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

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

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

我已经对一些数据进行了硬编码，并且可以正常工作，所以我不明白我对实时数据做错了什么。如果有人可以帮助我，我将不胜感激。我整夜都被困在这个地方。

这是我在Jsfiddle中的问题：

Problem on jsfiddle！

Answer 1

这里有一个错字，您需要返回元素（有关更多详细信息，请参考Lists and Keys文档）：

{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

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

1 个答案: