2017-11-29 45 views
1

반응 네이티브 맵을 사용하여 android 장치의 현재 사용자 geolocation에서 맵을 렌더링하려고합니다. 여기 반응 네이티브 - 맵을 사용하여 현재 위치를 얻는 방법

내가 지금까지있어 무엇 :

import React, { Component } from 'react'; 

import { 
    View, 
    StyleSheet, 
    Dimensions, 
} from 'react-native'; 

import MapView from 'react-native-maps'; 

const {width, height} = Dimensions.get('window') 

const SCREEN_HEIGHT = height 
const SCREEN_WIDTH = width 
const ASPECT_RATIO = width/height 
const LATITUDE_DELTA = 0.0922 
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO 

class MapComponent extends Component { 
    constructor() { 
    super() 
    this.state = { 
     initialPosition: { 
     latitude: 0, 
     longitude: 0, 
     latitudeDelta: 0, 
     longitudeDelta: 0, 
     }, 
    } 
    } 

    componentDidMount() { 
    navigator.geolocation.getCurrentPosition((position) => { 
     var lat = parseFloat(position.coords.latitude) 
     var long = parseFloat(position.coords.longitude) 

     var initialRegion = { 
     latitude: lat, 
     longitude: long, 
     latitudeDelta: LATITUDE_DELTA, 
     longitudeDelta: LONGITUDE_DELTA, 
     } 

     this.setState({initialPosition: initialRegion}) 
    }, 
    (error) => alert(JSON.stringify(error)), 
    {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000}); 
    } 


    renderScreen =() => { 
     return (
     <View style={styles.container}> 
      <MapView 
      style={styles.map} 
      initialRegion={this.state.initialPosition}/> 
     </View> 
    ); 
    } 

    render() { 
    return (
     this.renderScreen() 
    ); 
    } 
} 

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

export default MapComponent; 

지도는 렌더링,하지만 예상대로, 현재 장치의 위치 정보에.

권한이 이미로의 AndroidManifest.xml에서 설정 (이 바다의 중간에 렌더링) : 내가 "위치 요청 시간이 초과되었습니다"라는 경고를받을

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

20 초 후에 "코드 3 "

내가 뭘 잘못하고있어?

답변

2

는 잘 모르겠어요하지만 안드로이드에서이 문제로 어려움을 겪고 다른 사람들을위한

관련 보이는 issue ("Geolocation timed out, code 3")가의 maximumAge를 을 제거하려고 : 2000 옵션 매개 변수를. 이 옵션으로 인해 위치 정보가 시간 초과되거나 앱이 중단 될 수 있습니다.