Как наложить маркеры Json на реагирующие нативные карты?

Question

Я застрял на том, как я могу сопоставить JSON, чтобы реагировать на нативные карты. Я попробовал несколько способов отобразить каждую координату. Файл JSON из API:

{
    "request_time": "2019-09-28T22:13:25+01:00",
    "source": "NaPTAN",
    "acknowledgements": "Contains DfT NaPTAN bus stops data",
    "member": [
        {
            "type": "bus_stop",
            "name": "Western Avenue - SW-bound",
            "description": "Buckingham",
            "latitude": 52.00437,
            "longitude": -0.98989,
            "accuracy": 20,
            "atcocode": "040000004581",
            "distance": 846.0
        },
        {
            "type": "bus_stop",
            "name": "Overn Avenue - NE-bound",
            "description": "Buckingham",
            "latitude": 52.00378,
            "longitude": -0.98884,
            "accuracy": 20,
            "atcocode": "040000002388",
            "distance": 872.0
        }
    ]
}

В этом разделе MapView вы увидите метод карты, который я использую, маркеры по какой-то причине не отображаются. Я получаю TypeError: this.state.markers.map не является функцией:

          <MapView
              style={styles.map}
              showsUserLocation={true}
              initialRegion={{
                  latitude: this.state.latitude,
                  longitude: this.state.longitude,
                  latitudeDelta: 0.0462,
                  longitudeDelta: 0.0261,
          }}
          >

              {this.state.markers.map(marker => (
                  <Marker
                      coordinate={{ latitude: marker.member.latitude, longitude: marker.member.longitude}}
                  />
              ))}

          </MapView>
    );
  }
}

Answer 1

Исходя из вашего фактического кода, внесите следующие изменения

 getBusStops = () => {
    try {
        axios.get(`http://transportapi.com/v3/uk/places.json?lat=${this.state.latitude}&lon=${this.state.longitude}&type=bus_stop&app_id=xxxx&app_key=xxxxxxxx`)
            .then(response => {
                this.setState({ markers: response.data.member});
                console.log(this.state.markers);
            })
            .catch(error => {
                console.log('Error fetching and parsing data', error);
            });
    } catch (error) {
        console.log(error);
    }
}

Answer 2

this.state.markers.map is not a function означает, что вы пытаетесь использовать функцию map для переменной, не являющейся массивом, которая в данном случае равна this.state.markers.

Я думаю, что this.state.markers равно undefined, когда react native component сначала рендерит, в противном случае дважды проверьте, является ли this.state.markers array, а не object.

. Вы можете также выполнить проверку перед рендерингом в случае undefined.

this.state.markers && this.state.markers.map(marker => ( 
                 <Marker
                      coordinate={{ latitude: marker.member.latitude, longitude: marker.member.longitude}}
                  />
              ))}