react-native-mapsを使ってReactNativeで現在地、緯度、経度を取得する。

マップロケーションを開発しています。ある特定の場所をクリックすると、緯度と経度が表示されますが、現在地の緯度と経度は表示されません。

調べる方法がわかりません。

どのようにしてそれらを入手し、どのようにしてその位置にマーカーを置くことができるのでしょうか？

以下は私のコードです。

class Maps extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      region: {
        latitude:       LATITUDE,
        longitude:      LONGITUDE,
        latitudeDelta:  LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
      },
      marker: {
        latlng:{
          latitude:       null,
          longitude:      null,
          latitudeDelta:  LATITUDE_DELTA,
          longitudeDelta: LONGITUDE_DELTA
        }
      }
    }
  }

  componentDidMount() {
    navigator.geolocation.getCurrentPosition (
      (position) => { alert("value:" + position) },
      (error)    => { console.log(error) },
      {
        enableHighAccuracy: true,
        timeout:            20000,
        maximumAge:         10000
      }
    )
  }

  onMapPress(e) {
    alert("coordinates:" + JSON.stringify(e.nativeEvent.coordinate))
      this.setState({
        marker: [{ coordinate: e.nativeEvent.coordinate }]
      })
    }

  render() {
    return (
      <View style={styles.container}>
        <View style={{flexGrow:1}}>
          <MapView
            ref="map"
            provider={this.props.provider}
            style={styles.map}
            onPress={this.onMapPress.bind(this)}
            provider = {PROVIDER_DEFAULT}
            mapType="standard"
            zoomEnabled={true}
            pitchEnabled={true}
            showsUserLocation={true}
            followsUserLocation={true}
            showsCompass={true}
            showsBuildings={true}
            showsTraffic={true}
            showsIndoors={true}>
          </MapView>
        </View>
      </View>
    )
  }
}
Peter Mortensen
編集された質問 14日 11月 2018 в 6:42
プログラミング
react-native react-native-maps react-native-android
3日 4月 2017 в 5:08
2 ビュー
ソリューション

react-native@0.42.3とreact-native-maps@^0.13.1を使用し、日付でreact-native@0.44.0とreact-native-maps@^0.15.2`を使用して、以下の手順で行いました。

stateにmapRegionオブジェクトを設定し、最後のlongitudeと最後のlatitudeをnull`にします。

state = {
  mapRegion: null,
  lastLat: null,
  lastLong: null,
}

そして、componentDidMount()関数の中で、現在の位置の変化をそれぞれ監視します。

  componentDidMount() {
    this.watchID = navigator.geolocation.watchPosition((position) => {
      ...
    });
  }

変更があったら、実際の座標と delta 値を渡して、this.state.mapRegion で更新します (私のはあなたのとは違うかもしれないので、それに合わせてください)。

  componentDidMount() {
    this.watchID = navigator.geolocation.watchPosition((position) => {
      // Create the object to update this.state.mapRegion through the onRegionChange function
      let region = {
        latitude:       position.coords.latitude,
        longitude:      position.coords.longitude,
        latitudeDelta:  0.00922*1.5,
        longitudeDelta: 0.00421*1.5
      }
      this.onRegionChange(region, region.latitude, region.longitude);
    }, (error)=>console.log(error));
  }

次に、onRegionChange()関数が必要です。これは、componentDidMount()関数の中で、要素に新しい値を設定するのに使われます。

  onRegionChange(region, lastLat, lastLong) {
    this.setState({
      mapRegion: region,
      // If there are no new values set the current ones
      lastLat: lastLat || this.state.lastLat,
      lastLong: lastLong || this.state.lastLong
    });
  }

componentWillUnmount()`でジオロケーションをアンマウントします。

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

そして、現在の mapRegion オブジェクトを渡して MapView をレンダリングします。その中の MapView.Marker は、現在の latitude と longitude が変化したときに、それを表示するためのものです。

  render() {
    return (





                { this.state.lastLong } / { this.state.lastLat }





    );
  }

StyleSheet.absoluteFillObject](https://til.hashrocket.com/posts/202dfcb6c4-absolute-fill-component-in-react-native)をマップに追加することで、デバイスの幅と高さ全体を使って適切にレンダリングすることができます。

const styles = StyleSheet.create({
  map: {
    ...StyleSheet.absoluteFillObject,
  }
});

そのため、onPress()関数では、onRegionChange()と同様のことができます。

  onMapPress(e) {
    let region = {
      latitude:       e.nativeEvent.coordinate.latitude,
      longitude:      e.nativeEvent.coordinate.longitude,
      latitudeDelta:  0.00922*1.5,
      longitudeDelta: 0.00421*1.5
    }
    this.onRegionChange(region, region.latitude, region.longitude);
  }

expo.io](https://snack.expo.io/Sk7Ch1eae)でフルコードをチェックしてみてください（ただし、`react-native-maps`はインストールされていません）。

Deivison Sporteman
編集した答え 31日 10月 2018 в 7:14
解説 (8)

ジオローカリゼーションについては、こちらの公式ドキュメントをお読みになることをお勧めします： https://facebook.github.io/react-native/docs/geolocation.html

そして、現在の位置情報を使って、その情報を自分の状態に当てはめることができます。

navigator.geolocation.getCurrentPosition((position) => {
    this.setState({position: {longitude: position.longitude, latitude: position.latitude}});
}, (error) => {
    alert(JSON.stringify(error))
}, {
    enableHighAccuracy: true,
    timeout: 20000,
    maximumAge: 1000
});

次に render メソッドで、最終的なビューをマーカーで構成することができるようになります。

render() {
  return (



  )
}
Peter Mortensen
編集した答え 14日 11月 2018 в 6:43
解説 (2)

以下のコードでロケーションパーミッションを探します。

try {
    const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION
    )
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        alert("You can use the location")
    }
    else {
        alert("Location permission denied")
    }
}
catch (err) {
    console.warn(err)
}

次のコードを使用して、現在の場所の緯度と経度を取得します。

this.watchID = navigator.geolocation.watchPosition((position) => {
    let region = {
        latitude:       position.coords.latitude,
        longitude:      position.coords.longitude,
        latitudeDelta:  0.00922*1.5,
        longitudeDelta: 0.00421*1.5
    }
}
Peter Mortensen
編集した答え 14日 11月 2018 в 6:45
解説 (4)