Я не могу отобразить маркеры на карте (React-leaflet.js)

Я получил широту и долготу всех велосипедных очков из API TFL. Я пытаюсь показать все велосипедные точки в виде маркеров на карте листовок React.

Я успешно получил данные, отфильтровал их до нужного формата [51.505, -0.09] и сопоставил их с маркером.

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

Проблема в том, что маркеры не отображаются на карте.

Я жестко закодировал некоторые данные, и они работают, поэтому я не понимаю, что я делаю не так с живыми данными. Буду очень признателен, если кто-нибудь мне поможет? Я застрял в этом на всю ночь.

Вот моя проблема в Jsfiddle:

Проблема с jsfiddle!


leaflet mapping react-leaflet
person Code Ninja    schedule 19.04.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Здесь есть опечатка, вам нужно вернуть элемент (см. Списки и ключи документы для более подробной информации):

{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

person Vadim Gremyachev    schedule 19.04.2019
comment
Большое спасибо за помощь, Вадмин. : D - person Code Ninja; 19.04.2019