マップロケーションを開発しています。ある特定の場所をクリックすると、緯度と経度が表示されますが、現在地の緯度と経度は表示されません。
調べる方法がわかりません。
どのようにしてそれらを入手し、どのようにしてその位置にマーカーを置くことができるのでしょうか?
以下は私のコードです。
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>
)
}
}
[email protected]と
react-native-maps@^0.13.1を使用し、日付で
[email protected]と
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 (
<View style={{flex: 1}}>
<MapView
style={styles.map}
region={this.state.mapRegion}
showsUserLocation={true}
followUserLocation={true}
onRegionChange={this.onRegionChange.bind(this)}>
<MapView.Marker
coordinate={{
latitude: (this.state.lastLat + 0.00050) || -36.82339,
longitude: (this.state.lastLong + 0.00050) || -73.03569,
}}>
<View>
<Text style={{color: '#000'}}>
{ this.state.lastLong } / { this.state.lastLat }
</Text>
</View>
</MapView.Marker>
</MapView>
</View>
);
}
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`はインストールされていません)。
ジオローカリゼーションについては、こちらの公式ドキュメントをお読みになることをお勧めします: 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 (
<MapView ...>
<MapView.Marker
coordinate={this.state.position}
title="title"
description="description"
/>
</MapView>
)
}
以下のコードでロケーションパーミッションを探します。
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
}
}