Я загружаю карту с маркером из моего API для одного сообщения на следующем экране. Приведенный ниже код отлично работает, он отображает маркер на карте, и круг карты также появляется в том же месте, что и маркер.
Проблема: Я хочу установить initialRegion каккоординаты маркера, чтобы карта находилась в правильном месте, где находится маркер. Я попытался установить начальную и региональную широту и долготу с posts.lat & posts.lng, как я это делал с кругом просмотра карты, но это не работает с начальной областью.
Существует только ОДИН маркер, загруженный изAPI, как это один экран сообщения
componentDidMount() {
this.getPosts();
}
getPosts() {
axios
.get('myAPI')
.then(response => {
this.setState({
post: response.data,
loading: false
});
});
}
render() {
const posts = (this.state ?? this.state.posts) ? this.state.posts :
return (
<MapView style={styles.map}
initialRegion={{
latitude: 43.660192,
longitude: -79.425250,
latitudeDelta: 0.04,
longitudeDelta: 0.05,
}}
>
<MapView.Marker key={posts.id} coordinate={{latitude: posts.lat, longitude: posts.lng}} />
<MapView.Circle
center={{
latitude: posts.lat,
longitude: posts.lng,
}}
radius={150}
strokeWidth={2}
strokeColor="#3399ff"
fillColor="rgba(102,204,153,0.2)"
/>
</MapView>
);
}