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?

  • Android Studio 2.3 no tiene el especificador Test Instrumentation en la interfaz de usuario
  • Código de la versión de incremento automático en la aplicación para Android
  • Aplicación de Android: ¿Cómo leer obtener parámetros de un esquema de url personalizado?
  • Actualizar elementos en un objeto JSONO
  • Aplicación de filtros de Android Market - ¿Telefonía?
  • ¿Cómo puedo obtener el nombre del contacto con su número?
  • Gracias por adelantado

  • El permiso sólo se concede a la aplicación del sistema, en Manifest
  • Google Maps API v2 Android agregar forma drawable como marcador
  • Botón Inicio de la barra de acciones no funcional con PreferredScreen anidado
  • Lengüetas de material con estilo de Android 5.0
  • Gradle versión 1.10 es necesario. La versión actual es 2.0
  • La palabra @drawable no está correctamente escrita
  • 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.