how to change address geocoding in react native?

大兔子大兔子 提交于 2021-02-11 14:52:01

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!