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

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

1 голос
/ 19 апреля 2019

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

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

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

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

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

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

Проблема в jsfiddle !

1 Ответ

1 голос
/ 19 апреля 2019

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

{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

...