2 回答

TA貢獻1893條經(jīng)驗 獲得超10個贊
問題是,目前,您的地圖將在您為 pin 坐標(biāo)發(fā)出 API 請求之前呈現(xiàn)。如果這是使用 react-native-maps,他們的文檔指出在初始渲染后更改 initialRegion 不會導(dǎo)致地圖更改:
在組件安裝后更改 [the initialRegion] 屬性不會導(dǎo)致區(qū)域更改。 https://github.com/react-native-community/react-native-maps/blob/master/docs/mapview.md
您需要:
等到您有 API 響應(yīng)來渲染地圖,或者
使用初始區(qū)域的估計值渲染地圖,并在 API 調(diào)用完成且狀態(tài)更新后更新地圖位置。
選項1:
if (this.state.loading) {
// Better loading logic here
return <Text>Loading...</Text>
}
return (
<MapView
style={styles.map}
initialRegion={{
latitude: posts.lat,
longitude: posts.lng,
latitudeDelta: 0.04,
longitudeDelta: 0.05,
}}
>
</MapView>
);
第二種選擇:
// You need to add region to state.
getPosts() {
axios
.get('myAPI')
.then(response => {
this.setState({
post: response.data,
region: {
latitude: response.data.lat,
longitude: response.data.long,
latitudeDelta: 0.04,
longitudeDelta: 0.05,
}
loading: false
});
});
}
render() {
return (
<MapView
style={styles.map}
initialRegion={{
latitude: posts.lat,
longitude: posts.lng,
latitudeDelta: 0.04,
longitudeDelta: 0.05,
}}
region={this.state.region}
>
...
</MapView>
);
}
加分項:如果您使用animateToRegion. https://github.com/react-native-community/react-native-maps/blob/master/docs/mapview.md#methods
希望這可以幫助!

TA貢獻1847條經(jīng)驗 獲得超7個贊
我以前遇到過這個問題,我像這樣修復(fù)了它們。
首先,您應(yīng)該在導(dǎo)航到地圖視圖之前獲取遠程數(shù)據(jù)。
并且您應(yīng)該使用道具或?qū)Ш絽?shù)將 latlng 數(shù)據(jù)發(fā)送到 MapView。
其次,您應(yīng)該initialRegion
通過傳遞的數(shù)據(jù)進行設(shè)置。
添加回答
舉報