Question

我试图获得经度和长度，但似乎我无法从我得到的默认地理位置json对象访问它。

我跟着this example形成了文档并且效果很好，但我只需要很长的＆amp; lat所以我试图像这样选择它：

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>


        );
    }
}

最终我想做渲染这样的事情：

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;

React Native iOS获得lat＆amp;目前的位置很长

1 个答案: