で
ありがとうございますが反応ネイティブジオ使用していることを行うことができます。
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は、場所が変わるたびにsuccessコールバックを呼び出します。
私は現在、このアプリで地元のレストランを見つけるためにこれを使用しています。
更新回答:
私はこれを実行するためにGenymotionエミュレータを使用しています。 Genymotionでこのコードを実行する場合は、Google Playのサポートがインストールされていることを確認してください。そうしないと反応ネイティブマップは機能しません。 物理デバイスを使用している場合は、この手順を実行する必要はありません。 ジオロケーションについて
https://github.com/codepath/android_guides/wiki/Genymotion-2.0-Emulators-with-Google-Play-support
、あなたがのAndroidManifest.xmlでACCESS_FINE_LOCATION権限を追加したことを確認してください。
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
そうでない場合にエラーが出ます:「アプリのように見える」doesnの場所にアクセスする権限がありません。 "
また、GPS/Wi-Fi /データが有効になっていることを確認してください。そうしないと、現在の場所が取得できません。
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を使用し、位置の変化を追跡する必要がある場合。
私のコードを更新しましたが、あなたはそれを問題として見ることができますが、完璧な場所はまだレンダリングされていません – atif
あなたはgenymotionを使用していますか?あなたのGPSが有効になっていることを確認しましたか?あなたはgetCurrentPositionが有効な位置を返すように、コンソールロギングの位置を試しましたか?私はあなたがあなたのgetCurrentPosition呼び出しのエラーを処理していないことにも気付きました。 "(error)=> alert(error.message)"を追加して、エラーが発生していないかどうか確認してください。 – Antoni4
私は物理的なデバイスを使ってテストしています。私はそれを追加しようとしたが、成功しなかったエラー部分を削除しました。私のコードは正しいですか? – atif