Je ne sais pas comment je peux mapper un JSON pour réagir aux cartes natives. J'ai essayé plusieurs façons de mapper chaque coordonnée Le fichier JSON de l'API:
<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>
);
}
}
Dans cette section MapView, vous verrez la méthode de carte que j'utilise, les marqueurs ne sont pas affichés pour une raison quelconque. Je reçois une TypeError: this.state.markers.map n'est pas une fonction:
{
"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
}
]
}
3 Réponses :
this.state.markers.map n'est pas une fonction signifie que vous essayez d'utiliser la fonction map sur une variable non tableau qui est this.state .markers dans ce cas.
Je pense que this.state.markers est indéfini lorsque réagit le composant natif pour la première fois sinon, vérifiez si this.state.markers est un tableau et non un object .
Vous pouvez également faire une vérification avant le rendu en cas de indéfini .
this.state.markers && this.state.markers.map(marker => (
<Marker
coordinate={{ latitude: marker.member.latitude, longitude: marker.member.longitude}}
/>
))}
J'ai essayé mais ça ne marche pas. Voici mon expo: snack.expo.io/S1rcu7guB
À la suite de votre code actuel, apportez la modification suivante
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);
}
}
J'ai rencontré le même barrage routier, essayez d'assigner this.state à const puis utilisez l'instruction return () pour arrêter l'exécution d'une fonction et renvoyer la valeur de l'expression.
// voir l'exemple ci-dessous. p>
componentDidMount() {
return fetch("www.yourUrlGoesHere.com/Json", { cache: "reload" })
.then((response) => response.json())
.then((responseJson) => {
const mapArray = responseJson.properties.filter((item) => {
if (typeof(item.photo) !== 'undefined' && item.photo.length)
return item.property_type && item.property_type.toUpperCase();
});
this.setState({
isLoading: false,
dataSource: mapArray
});
})
.catch((error) => {
console.error(error);
});
}
render() {
const { navigation } = this.props;
const { dataSource } = this.state;
return (
<View style={styles.container}>
<MapView initialRegion={{
latitude: 25.2048,
longitude: 55.2708,
latitudeDelta: 0.122,
longitudeDelta: 0.121
}} style={styles.map}>
{dataSource.map((item, index) => {
return (
<Marker
key={`marker-${item.listing_ref}`}
coordinate = {{
latitude : item.geopoints.split(",")[1] - 0,
longitude : item.geopoints.split(",")[0] - 0,
}}
>
<View
style={[
styles.marker,
styles.shadow,
]}
>
<Text style={{marginTop: 10, marginBottom: 10,fontSize : 8, fontWeight:"bold", color : "black"}}>د.إ {numeral(item.price).format('0.0a')}</Text>
</View>
</Marker>
);
})}
</MapView>
</View>
);
}
}
De plus, pour votre référence, voici un code source d'un exemple de travail joint avec une capture d'écran de la répartition des marqueurs. Dans ce cas, c'est un marqueur personnalisé qui rend item.price à partir du JSON.
Le format des coordonnées json est le suivant: "geopoints:" 55.263237,25.009765 ","
J'ai donc écrit une fonction distincte pour la rendre compatible.
Cependant, vous pouvez utiliser le format le plus compatible avec votre structure de données.
render() {
const { markers } = this.state;
return (
<View style={styles.container}>
<MapView
style={styles.map}
showsUserLocation={true}
initialRegion={{
latitude: this.state.latitude,
longitude: this.state.longitude,
latitudeDelta: 0.0462,
longitudeDelta: 0.0261,
}}
>
{markers.map((marker, index ) => {
return (
<Marker
coordinate={{ latitude: marker.member.latitude, longitude: marker.member.longitude}}
/>
)
))}
</MapView>
);
}
}