react-native-maps使用地理位置获取当前位置

时间:2018-04-12 12:16:24

标签: android react-native geolocation react-native-maps

我正在尝试获取用户的当前位置,但每次我运行我的模拟器时它都会向我显示googleplex的位置 this is the output iam getting 我的猜测是它的默认位置。我在manifest.xml中添加了“ACCESS_FINE_LOCATION”,这是我的源代码。 。 。 。 。 。

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

// import { Actions } from 'react-native-router-flux';
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;

export default class Location extends Component {
    constructor(props){
        super(props);
        this.state = {
            initialPosition: {
              latitude: 0,
              longitude: 0,
              latitudeDelta: 0,
              longitudeDelta: 0
            },
            markerPosition: {
              latitude: 0,
              longitude: 0,

            }
        }
    }
    watchID: ?number = null
    componentDidMount(){
        navigator.geolocation.getCurrentPosition((position) => {
            //let lat = parseFloat(position.coords.latitude);
            //let long = parseFloat(position.coords.longitude);
            var lat = parseFloat(position.coords.latitude);
            var long = parseFloat(position.coords.longitude);

            //this.setState({initialRegion : {
              var initialRegion = {
                latitude : lat,
                longitude : long,
                latitudeDelta : LATITUDE_DELTA,
                longitudeDelta: LONGITUDE_DELTA
            }
              this.setState({initialPosition: initialRegion})
              this.setState({markerPosition: initialRegion})


        },
            (error)=> alert(JSON.stringify(error)),
            {enableHighAccuracy : true , timeout: 20000, maximumAge:1000})

            this.watchID= navigator.geolocation.watchPosition((position)=>{
              var lat = parseFloat(position.coords.latitude)
              var long = parseFloat(position.coords.longitude)

              var lastRegion ={
                latitude: lat,
                longitude: long,
                latitudeDelta: LATITUDE_DELTA,
                longitudeDelta: LONGITUDE_DELTA
              }
              this.setState({initialPosition: lastRegion})
              this.setState({markerPosition: lastRegion})
            })
    }
    componentWillUnmount(){
      navigator.geolocation.clearWatch(this.watchID)
    }

    render(){
        return(
            <View style={styles.container}>
              <MapView style={styles.map}
              region ={this.state.initialPosition}>

              <MapView.Marker
              coordinate={this.state.markerPosition}
              >
              <View style={styles.radius}>
              <View style={styles.marker}>
              </View>
              </View>
              </MapView.Marker>
              </MapView>

            </View>
        );
    }}


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

如果有人可以帮助我,请添加当前位置按钮,这将非常有帮助。

0 个答案:

没有答案