cách tạo bản đồ phát hiện vị trí tự động trong React-Native

Question

Tôi đã tạo bản đồ ở địa phương phản ứng với bản đồ https://github.com/lelandrichardson/react-native-maps nhưng tôi muốn phát hiện vị trí tự động bằng gps. Đây là đoạn mã hiển thị bản đồ với vĩ độ và kinh độ tĩnh. Đây là mã được cập nhật của tôi. Nhưng nó vẫn không hiển thị vị trí hoàn hảo

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> 

bạn có thể sửa lại không?

Cảm ơn trước

Answer 1

Bạn có thể làm điều đó bằng Phản ứng bản địa geolocation:
https://facebook.github.io/react-native/docs/geolocation.html

Đã có một ví dụ điển hình có về cách bạn có thể làm điều đó:

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}); 
    }); 
} 

Bạn bây giờ có initialPosition (vĩ độ và kinh độ), sử dụng nó thay vì giá trị mã hóa cứng của bạn. WatchPosition gọi cuộc gọi lại thành công bất cứ khi nào vị trí thay đổi.

Tôi hiện đang sử dụng tính năng này để tìm các nhà hàng địa phương trong ứng dụng của chúng tôi.

---

Cập nhật trả lời:

Tôi đang sử dụng Genymotion giả lập để chạy này. Nếu bạn cũng sẽ chạy mã này trên Genymotion, hãy đảm bảo rằng bạn đã cài đặt hỗ trợ của Google Play, nếu không, bản sao phản ứng gốc sẽ không hoạt động. Bạn không phải thực hiện bước này nếu bạn đang sử dụng thiết bị vật lý.

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

Về Định vị, hãy chắc chắn rằng bạn đã thêm phép ACCESS_FINE_LOCATION trong AndroidManifest.xml:

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

Nếu không, bạn sẽ nhận được một lỗi: "Có vẻ như các ứng dụng doesn' t có quyền truy cập vị trí. "

Đồng thời, hãy đảm bảo rằng GPS/Wifi/Dữ liệu được bật, nếu không thiết bị của bạn không thể truy xuất vị trí hiện tại của bạn.

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; 

Chạy đoạn mã trên, bạn sẽ thấy rằng vị trí ban đầu tĩnh của bạn (Mumbai) được ghi đè bằng vị trí hiện tại của bạn từ điện thoại thông qua componentDidMount khi getCurrentPosition được gọi.

Nếu bạn cần phải theo dõi những thay đổi về vị trí, sử dụng watchPosition kết hợp với onRegionChange, nếu không nếu bạn chỉ cần để có được vị trí ban đầu loại bỏ watchPosition bước.