如何在 React-Native 中创建检测自动位置的地图

how to create maps which detect automatic location in React-Native(如何在 React-Native 中创建检测自动位置的地图)

问题描述

我在 react-native 中创建了地图，参考 https://github.com/lelandrichardson/反应原生地图地图已创建，但我想使用 gps 检测自动位置.这是使用静态纬度和经度呈现地图的代码.这是我更新的代码.但它仍然无法呈现完美的位置

I have created maps in react-native referring to https://github.com/lelandrichardson/react-native-maps map is created but i want to detect automatic location using gps. Here is the code which renders map with static latitude and longitude. Here's my updated code. But it still not rendering perfect location

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>

你能纠正一下吗?

提前致谢

推荐答案

你可以使用 React-native 地理定位来做到这一点:
https://facebook.github.io/react-native/docs/geolocation.html

You can do that using React-native geolocation:
https://facebook.github.io/react-native/docs/geolocation.html

那里已经有一个很好的例子来说明如何做到这一点:

There is already a good example there on how you can do that:

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

您现在有了初始位置(纬度和经度)，使用它来代替您的硬编码值.只要位置发生变化，watchPosition 就会调用成功回调.

You now have the initialPosition (latitude and longitude), use it instead of your hard coded value. The watchPosition invokes the success callback whenever the location changes.

我目前正在使用它在我们的应用中查找当地餐馆.

I am currently using this to find local restaurants in our app.

更新答案:

我正在使用 Genymotion 模拟器来运行它.如果您还打算在 Genymotion 上运行此代码，请确保您已安装 Google Play 支持，否则 react-native-maps 将无法工作.如果您使用的是物理设备，则无需执行此步骤.

I am using Genymotion emulator to run this. If you are also going to run this code on Genymotion, please make sure you have installed Google Play support, otherwise react-native-maps won't work. You don't have to do this step if you are using a physical device.

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

关于地理位置，请确保您在AndroidManifest.xml中添加了ACCESS_FINE_LOCATION权限:

Regarding Geolocation, please make sure you have added ACCESS_FINE_LOCATION permission in the AndroidManifest.xml:

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

否则你会得到一个错误:看起来该应用没有访问位置的权限."

Otherwise you will get an error: "Looks like the app doesn't have the permission to access location."

另外请确保您的 GPS/Wifi/Data 已启用，否则您的设备无法检索您当前的位置.

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 获取的当前位置覆盖了.

Running the above code, you should find that your original static location (Mumbai) is overwritten with your current location from the device through componentDidMount when getCurrentPosition is called.

如果需要跟踪位置变化，请结合onRegionChange使用watchPosition，否则如果只需要获取初始位置，请移除watchPosition一步.