问题
I use react-native-maps, react-native-gecoding and react-native-geolocation-service, I have a problem when the maps move the marker doesn't move as well as the address that gets from the geocoder doesn't change, the address should change because of longitude and latitude This changes, even though I have set longitude and latitude to state, how do I make the marker move and the address changes when the user moves / clicks the marker?
this is my code
const [coordinate, setCoordinate] = useState({
longitude: 106.7391473,
latitude: -6.2731662,
longitudeDelta: 0,
latitudeDelta: 0
})
const _handleCoordinate = () => {
Geolocation.getCurrentPosition(
(position) => {
console.log(position.coords)
setCoordinate({
...coordinate,
longitude: position.coords.longitude,
latitude: position.coords.latitude,
longitudeDelta: position.coords.longitude,
latitudeDelta: position.coords.latitude
})
Geocoder.init(APIKEY)
Geocoder.from(position.coords.latitude, position.coords.longitude)
.then(json => {
var addressComponent = json.results[0].formatted_address
setAddress(addressComponent)
})
},
(error) => {
setError(error.message)
console.log(error.code, error.message)
},
{ enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
)
setLoading(false)
}
return (
<View style={{ flex: 1, height: windowHeight }}>
<Header
title='gunakan lokasi saat ini'
type='close'
onPress={() => navigation.navigate('CurrentLocation')}
/>
<View style={{ flex: 1, backgroundColor: 'white' }}>
<View style={styles.container}>
<MapView
style={styles.map}
initialRegion={coordinate}
showsUserLocation={true}
showsMyLocationButton={true}
zoomEnabled={true}
zoomTapEnabled={true}
zoomControlEnabled={true}
maxZoomLevel={15}
onPress={_handleCoordinate}
>
<Marker
coordinate={{
latitude: coordinate.latitude,
longitude: coordinate.longitude
}}
/>
</MapView>
</View>
<View style={styles.sectionBottom}>
{loading ? (
<Text>Loading...</Text>
) : (
<View>
<Text style={{ marginBottom: 16, flex: 1 }}>
{address}
</Text>
<TouchableOpacity style={styles.stwmBtnDefault}>
<Text style={styles.textButton}>Terapkan Lokasi</Text>
</TouchableOpacity>
</View>
)}
</View>
</View>
</View>
)
来源:https://stackoverflow.com/questions/63514592/how-to-change-address-geocoding-in-react-native