Join FlipAndroid.COM Telegram Group: https://t.me/joinchat/F_aqThGkhwcLzmI49vKAiw


Cómo crear mapas que detectan la ubicación automática en React-Native

He creado mapas en reaccionar-nativo que refiere a https://github.com/lelandrichardson/react-native-maps el mapa se crea pero quiero detectar la localización automática usando gps. Aquí está el código que hace el mapa con latitud y longitud estáticas. Aquí está mi código actualizado. Pero todavía no prestando la ubicación perfecta

getInitialState() { return { initialPosition: 'unknown', lastPosition: 'unknown', }; }, componentDidMount() { navigator.geolocation.getCurrentPosition( (position) => { var initialPosition = JSON.stringify(position); this.setState({initialPosition}); }, {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000} ); this.watchID = navigator.geolocation.watchPosition((position) => { var lastPosition = JSON.stringify(position); this.setState({lastPosition}); }); }, componentWillUnmount() { navigator.geolocation.clearWatch(this.watchID); }, render() { return ( <View style={styles.container}> <MapView ref="map" mapType="terrain" style={styles.map} initialPosition={this.state.initialPosition} lastPosition={this.state.lastPosition} > </MapView> </View> 

Puede por favor corregirlo?

  • ¿Cómo puedo crear una actividad transparente en Android?
  • ¿Cómo proteger el contenido multimedia (vídeo, audio) en Android de ser guardado / redistribuido?
  • ¿Existe la posibilidad de ejecutar applets en Android o Blackberry?
  • Android ImageView: Ajustar el ancho
  • Android: ¿Comprobar si la cámara admite el enfoque automático?
  • Cómo obtener la barra de herramientas de fragmento?
  • Gracias por adelantado

  • Cómo utilizar la funcionalidad de búsqueda en la vista de lista personalizada en Android
  • ¿Cómo hacer que Proguard ignore las bibliotecas externas?
  • ERROR / Web Console: Uncaught TypeError: No se puede llamar al método 'getItem' de null en http://m.youtube.com/:844
  • Volley Post JsonObjectRequest ignorando los parámetros mientras usa getHeader y getParams
  • Dibuja un círculo en Android MapView
  • Android: La ventana de adición falló / android.os.TransactionTooLargeException en dispositivos Samsung
  • One Solution collect form web for “Cómo crear mapas que detectan la ubicación automática en React-Native”

    Puede hacerlo utilizando React-native geolocation:
    https://facebook.github.io/react-native/docs/geolocation.html

    Ya hay un buen ejemplo de cómo hacerlo:

     componentDidMount: function() { navigator.geolocation.getCurrentPosition( (position) => { var initialPosition = JSON.stringify(position); this.setState({initialPosition}); }, (error) => alert(error.message), {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000} ); this.watchID = navigator.geolocation.watchPosition((position) => { var lastPosition = JSON.stringify(position); this.setState({lastPosition}); }); } 

    Ahora tiene la posición inicial (latitud y longitud), úsela en lugar de su valor codificado. WatchPosition invoca la devolución de llamada de éxito siempre que cambia la ubicación.

    Actualmente estoy usando esto para encontrar restaurantes locales en nuestra aplicación.


    Respuesta actualizada:

    Estoy usando el emulador de Genymotion para ejecutar esto. Si también va a ejecutar este código en Genymotion, asegúrese de haber instalado el soporte de Google Play , de lo contrario, reaccionar-mapas nativos no funcionará. No tiene que realizar este paso si está utilizando un dispositivo físico.

    https://github.com/codepath/android_guides/wiki/Genymotion-2.0-Emulators-with-Google-Play-support

    En cuanto a la geolocalización , asegúrate de haber añadido el permiso ACCESS_FINE_LOCATION en AndroidManifest.xml:

     <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> 

    De lo contrario, obtendrá un error: "Parece que la aplicación no tiene permiso para acceder a la ubicación."

    También asegúrese de que su GPS / Wifi / Datos está habilitado, de lo contrario su dispositivo no puede recuperar su ubicación actual.

     var React = require('react'); var ReactNative = require('react-native'); var { StyleSheet, PropTypes, View, Text, Dimensions, TouchableOpacity, } = ReactNative; var MapView = require('react-native-maps'); var { width, height } = Dimensions.get('window'); const ASPECT_RATIO = width / height; // (Initial Static Location) Mumbai const LATITUDE = 19.0760; const LONGITUDE = 72.8777; const LATITUDE_DELTA = 0.01; const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO; var CustomMap = React.createClass({ getInitialState() { return { region: { latitude: LATITUDE, longitude: LONGITUDE, latitudeDelta: LATITUDE_DELTA, longitudeDelta: LONGITUDE_DELTA }, }; }, componentDidMount: function() { navigator.geolocation.getCurrentPosition( (position) => { this.setState({ region: { latitude: position.coords.latitude, longitude: position.coords.longitude, latitudeDelta: LATITUDE_DELTA, longitudeDelta: LONGITUDE_DELTA } }); }, (error) => alert(error.message), {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000} ); this.watchID = navigator.geolocation.watchPosition((position) => { const newRegion = { latitude: position.coords.latitude, longitude: position.coords.longitude, latitudeDelta: LATITUDE_DELTA, longitudeDelta: LONGITUDE_DELTA } this.onRegionChange(newRegion); }); }, componentWillUnmount: function() { navigator.geolocation.clearWatch(this.watchID); }, onRegionChange(region) { this.setState({ region }); }, render() { return ( <View style={styles.container}> <MapView ref="map" mapType="terrain" style={styles.map} region={this.state.region} onRegionChange={this.onRegionChange} > </MapView> <View style={styles.bubble}> <Text style={{ textAlign: 'center'}}> {`${this.state.region.latitude.toPrecision(7)}, ${this.state.region.longitude.toPrecision(7)}`} </Text> </View> </View> ); }, }); var styles = StyleSheet.create({ container: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'flex-end', alignItems: 'center', }, map: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, }, bubble: { backgroundColor: 'rgba(255,255,255,0.7)', paddingHorizontal: 18, paddingVertical: 12, borderRadius: 20, }, }); module.exports = CustomMap; 

    Ejecutando el código anterior, debe encontrar que su ubicación estática original (Mumbai) se sobrescribe con su ubicación actual desde el dispositivo a través de componentDidMount cuando se llama a getCurrentPosition.

    Si necesita realizar un seguimiento de los cambios en la posición, use watchPosition en combinación con onRegionChange , de lo contrario si sólo necesita obtener la posición inicial quite el paso watchPosition .

    FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.