web-dev-qa-db-ja.com

React-Nativeで自動位置を検出するマップを作成する方法

https://github.com/lelandrichardson/react-native-maps を参照して、react-nativeでマップを作成しましたが、マップが作成されましたが、gpsを使用して自動位置を検出したいと思います。以下は、静的な緯度と経度でマップをレンダリングするコードです。これが私の更新されたコードです。しかし、それはまだ完璧な場所をレンダリングしていません

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>

修正して頂けますか？

前もって感謝します

javascriptandroidgpsmapsreact-native
14
atif

これは、Reactネイティブの地理位置情報を使用して行うことができます。
https://facebook.github.io/react-native/docs/geolocation.html

その方法については、すでに良い例があります。

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

これで、initialPosition（緯度と経度）が得られました。ハードコードされた値の代わりにそれを使用してください。位置が変わると、watchPositionは成功コールバックを呼び出します。

私は現在、これを使用して、アプリで地元のレストランを見つけています。

更新された回答：

これを実行するためにGenymotionエミュレーターを使用しています。 Genymotionでもこのコードを実行する場合は、Google Playサポートがインストールされていることを確認してください。そうしないと、react-native-mapsが機能しません。 物理デバイスを使用している場合は、この手順を実行する必要はありません。

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

Geolocationについては、AndroidManifest.xmlにACCESS_FINE_LOCATION権限が追加されていることを確認してください。

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

そうしないと、「アプリに位置情報にアクセスする権限がないようです」というエラーが表示されます。

また、GPS/Wifi /データが有効になっていることを確認してください。そうでない場合、デバイスは現在地を取得できません。

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を介してデバイスからの現在の場所で上書きされます。

位置の変化を追跡する必要がある場合は、-watchPositionをonRegionChangeと組み合わせて使用​​します。それ以外の場合は、初期位置を取得する必要があるだけですwatchPositionステップ。

10
Antoni4