React-Native에서 자동 위치를 감지하는지도를 만드는 방법

Question

https://github.com/lelandrichardson/react-native-maps 지도가 생성되었지만 gps를 사용하여 자동 위치를 감지하고 싶습니다. 다음은 정적 위도와 경도로지도를 렌더링하는 코드입니다. 여기 내 업데이트 된 코드가 있습니다. 하지만 여전히 완벽한 위치를 렌더링하지 못합니다.

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> 

주시겠습니까? 사전에

덕분에 당신이 할 수있는

Answer 1

그 사용 반작용 네이티브 위치 정보를 :
https://facebook.github.io/react-native/docs/geolocation.html

좋은 예는 당신이 할 수있는 방법이 이미 있습니다 :

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

당신을 이제 initialPosition (위도 및 경도)을 사용하여 하드 코딩 된 값 대신 사용하십시오. watchPosition은 위치가 변경 될 때마다 success 콜백을 호출합니다.

현재 Google 어스에서 현지 레스토랑을 찾으려고 사용 중입니다.

---

업데이트 답 :

나는이 실행 Genymotion 에뮬레이터를 사용하고 있습니다. Genymotion에서이 코드를 실행하려는 경우 Google Play 지원을 설치했는지 확인하십시오. 그렇지 않으면 react-native-maps가 작동하지 않습니다. 물리적 장치를 사용하는 경우이 단계를 수행 할 필요가 없습니다. 위치 정보에 대해서는

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

, 당신은 AndroidManifest.xml에에 ACCESS_FINE_LOCATION 권한을 추가했는지 확인하십시오

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

은 그렇지 않으면 오류가 발생합니다 : 응용 프로그램은 '아무튼처럼 "보이는 위치에 액세스 할 수있는 권한이 없습니다. "

또한 GPS/Wifi/데이터가 사용 설정되어 있는지 확인하십시오. 그렇지 않으면 기기가 현재 위치를 검색 할 수 없습니다.

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; 

위의 코드를 실행, 당신은 getCurrentPosition가 호출 될 때 원래의 고정 위치 (뭄바이)가 componentDidMount을 통해 장치에서 사용자의 현재 위치에 덮어 것을 발견한다.

방금 ​​초기 위치가 watchPosition에게 단계를 제거 얻을 필요가 그렇지 않은 경우, 위치 변화를 추적 onRegionChange와 함께 watchPosition를 사용해야하는 경우.