反应本机iOS获取当前位置的纬度和经度

Question

我想获得经度和语态，但是好像我无法从默认的地理位置json对象访问它。

我跟着this example形成文档和它的伟大工程，但我只需要长&纬度，所以我试图把它挑出来是这样的：

const LATITUDE = 19.0760; 
const LONGITUDE = 72.8777; 

class Map extends Component { 

    state = { 
     region: { 
      latitude: LATITUDE, 
      longitude: LONGITUDE 
     }, 
    }; 

    watchID: ?number = null; 

    componentDidMount() { 
     navigator.geolocation.getCurrentPosition(
      (position) => { 
       var initialPosition = JSON.stringify(position); 
       this.setState({ 
         initialRegion: { 
          latitude: initialPosition.coords.latitude, 
          longitude: initialPosition.coords.longitude, 
         } 
       }); 
      }, 
      (error) => alert(JSON.stringify(error)), 
      {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000} 
     ); 
     this.watchID = navigator.geolocation.watchPosition((position) => { 
      var lastPosition = JSON.stringify(position); 
      this.setState({ 
         lastRegion: { 
          latitude: lastPosition.coords.latitude, 
          longitude: lastPosition.coords.longitude, 
         } 
       }); 
     }); 
    } 

    componentWillUnmount() { 
     navigator.geolocation.clearWatch(this.watchID); 
    } 

    render() { 
     return (
      <View> 
       <Text> 
        <Text style={styles.title}>Initial position: </Text> 
        {this.state.initialRegion} 
       </Text> 
       <Text> 
        <Text style={styles.title}>Current position: </Text> 
        {this.state.lastRegion} 
       </Text> 
      </View> 


     ); 
    } 
} 

Eventualy我想要做的渲染是这样的：

render() { 
     return (
      <MapView 
       style={ styles.map } 
       initialRegion={{ 
        latitude: {this.state.lat}, 
        longitude:{this.state.long}, 
        latitudeDelta: 0.0922, 
        longitudeDelta: 0.0421, 
       }} 
      /> 
     ); 
    } 

Answer 1

试试这个：

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

var Dimensions = require('Dimensions'), 
    windowSize = Dimensions.get('window'), 
    Screen  = require('Dimensions').get('window'), 
    NavigationBar = require('react-native-navbar'); 

var regionText = { 
    latitude: '0', 
    longitude: '0', 
    latitudeDelta: '0', 
    longitudeDelta: '0', 
}; 

class LocateMap extends Component { 

    createAnnotation(longitude, latitude) { 
    return { 
     longitude, 
     latitude, 
     draggable: true, 
     onDragStateChange: (event) => { 
     if (event.state === 'starting') { 
      this.setState({ 
      annotations: [this.createAnnotation(event.longitude, event.latitude)], 
      }); 
     } 
     }, 
    }; 
    } 

    constructor(props) { 
    super(props); 
    this.state = { 
     isFirstLoad: true, 
     annotations: [], 
     mapRegion: undefined, 
    }; 
    } 

    render() { 
    if (this.state.isFirstLoad) { 
     var onRegionChangeComplete = (region) => { 
     //When the MapView loads for the first time, we can create the annotation at the 
     //region that was loaded. 
     this.setState({ 
      isFirstLoad: true, 
      annotations: [this.createAnnotation(region.longitude, region.latitude)], 
     }); 
     }; 
    } 

    const rightButtonConfig = { 
    title: 'Locate', 
    tintColor:'#ffffff', 
    handler:() => { 
     this.props.data.getMapPosition(this.state.annotations[0].longitude, this.state.annotations[0].latitude); 
     this.props.navigator.pop(); 
    }, 
    }; 

    return (
     <View style={{flex:1}}> 
     <MapView 
     style={styles.map} 
     onRegionChangeComplete={onRegionChangeComplete} 
     region={this.state.mapRegion} 
     annotations={this.state.annotations} 
     zoomEnabled={true} 
     showsUserLocation={true} 
     /> 
     </View> 
    ); 
    } 

}; 

var styles = StyleSheet.create({ 
    map: { 
    height: Screen.height, 
    width: Screen.width 
    } 
}); 

module.exports= LocateMap;