Można to zrobić za pomocą React-natywną geolokalizacji:
https://facebook.github.io/react-native/docs/geolocation.html
Jest już dobry przykład tam, w jaki sposób można to zrobić:
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});
});
}
You teraz ma początkową pozycję (szerokość i długość geograficzną), użyj go zamiast swojej wartości zakodowanej na sztywno. Funkcja watchPosition wywołuje oddzwanianie powodzenia za każdym razem, gdy zmienia się lokalizacja.
Obecnie używam tego, aby znaleźć lokalne restauracje w naszej aplikacji.
Updated Odpowiedź:
Używam Genymotion emulatora do uruchomienia tego. Jeśli masz zamiar uruchomić ten kod na Genymotion, upewnij się, że masz zainstalowaną Google Play wsparcie, w przeciwnym razie mapy-native-native-działania nie będą działać. Nie musisz wykonywać tego kroku, jeśli używasz urządzenia fizycznego.
https://github.com/codepath/android_guides/wiki/Genymotion-2.0-Emulators-with-Google-Play-support
chodzi Geolokalizacja, upewnij się, że zostały dodane pozwolenie ACCESS_FINE_LOCATION w AndroidManifest.xml:
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
przeciwnym razie pojawi się błąd: „Wygląda na to, że aplikacja nie robi” t mieć pozwolenie na dostęp do lokalizacji. "
Upewnij się także, że GPS/Wifi/Dane jest włączone, w przeciwnym razie urządzenie nie może odzyskać aktualnej pozycji.
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;
Running powyższy kod, okaże się, że Twój oryginalny statyczny lokalizacja (Bombaj) jest zastępowany z bieżącej lokalizacji z urządzenia przez componentDidMount gdy getCurrentPosition nazywa.
Jeśli chcesz śledzić zmiany w położeniu, należy watchPosition w połączeniu z onRegionChange, w przeciwnym razie, jeśli tylko trzeba się początkowa pozycja usunąć watchPosition krok.
Hej, zaktualizowałem mój kod, możesz go zobaczyć jako pytanie, ale idealna lokalizacja nadal nie renderuje – atif
czy używasz genymotion?Czy masz pewność, że twój GPS jest włączony? Czy próbowałeś już pozycji rejestrowania konsoli, aby upewnić się, że getCurrentPosition zwraca poprawną pozycję? Zauważyłem również, że nie obsługujesz błędów w wywołaniu getCurrentPosition. Spróbuj dodać "(błąd) => alert (error.message)", aby sprawdzić, czy dostaniesz jakieś błędy. – Antoni4
Używam urządzenia fizycznego do testowania. Usunąłem część błędu, próbowałem ją dodać, ale bez powodzenia. czy mój kod jest poprawny? – atif