如何使用 react-native-maps 获取当前位置
How to get current location using react-native-maps
我正在尝试使用 react-native 地图在 android 设备上的当前用户地理位置渲染地图。
这是我目前得到的:
import React, { Component } from 'react';
import {
View,
StyleSheet,
Dimensions,
} from 'react-native';
import MapView from 'react-native-maps';
const {width, height} = Dimensions.get('window')
const SCREEN_HEIGHT = height
const SCREEN_WIDTH = width
const ASPECT_RATIO = width / height
const LATITUDE_DELTA = 0.0922
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO
class MapComponent extends Component {
constructor() {
super()
this.state = {
initialPosition: {
latitude: 0,
longitude: 0,
latitudeDelta: 0,
longitudeDelta: 0,
},
}
}
componentDidMount() {
navigator.geolocation.getCurrentPosition((position) => {
var lat = parseFloat(position.coords.latitude)
var long = parseFloat(position.coords.longitude)
var initialRegion = {
latitude: lat,
longitude: long,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
}
this.setState({initialPosition: initialRegion})
},
(error) => alert(JSON.stringify(error)),
{enableHighAccuracy: true, timeout: 20000, maximumAge: 1000});
}
renderScreen = () => {
return (
<View style={styles.container}>
<MapView
style={styles.map}
initialRegion={this.state.initialPosition}/>
</View>
);
}
render() {
return (
this.renderScreen()
);
}
}
const 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,
},
});
export default MapComponent;
地图呈现,但未按预期呈现在当前设备地理位置中。 (它呈现在海洋中央)
权限已在 AndroidManifest.xml 设置为:
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
20 秒后,我收到一条提示,说 "Location request timed out" "code 3"
我做错了什么?
我不确定,但有一个 issue ("Geolocation timed out, code 3") 看起来相关
For anyone else struggling with this issue on android, try removing
the maximumAge: 2000 option parameter. This option was causing
geolocation to either timeout or crash the app.
它在我的身上运行得很好。我所做的唯一更改是 StyleSheet
.
container: {
position: 'absolute',
height : SCREEN_HEIGHT,
width : SCREEN_WIDTH,
justifyContent: 'flex-end',
alignItems: 'center',
}
此后,它呈现我的位置。您可以在之后添加标记以显示您的位置。
这对我有用。第三个选项是造成问题的原因。
navigator.geolocation.getCurrentPosition() =>{
},
err => {
},
{ enableHighAccuracy: false, timeout: 20000}, //this worked for me
navigator.geolocation.getCurrentPosition()
已弃用。
请改用 @react-native-community/geolocation
。
npm install @react-native-community/geolocation --save
1.npm 安装@react-native-community/geolocation --保存
2.import 来自“@react-native-community/geolocation”的地理位置;
3.navigator.geolocation.getCurrentPosition => Geolocation.getCurrentPosition
import React, { Component } from "react";
// global.currentScreenIndex = 'Dashboard';
//Import all required component
import {
View,
Text,
StyleSheet,
TouchableOpacity,
Image,
Modal,
TouchableHighlight,
StatusBar,
FlatList,
ActivityIndicator,
Button,
NetInfo,
} from "react-native";
import MapView, { Marker } from "react-native-maps";
import Geolocation from "@react-native-community/geolocation";
const MyStatusBar = ({ backgroundColor, ...props }) => (
<View style={[styles.statusBar, { backgroundColor }]}>
<StatusBar translucent backgroundColor={backgroundColor} {...props} />
</View>
);
class Dashboard extends Component {
constructor() {
super();
this.state = {
initialPosition: {
latitude: 0,
longitude: 0,
latitudeDelta: 0,
longitudeDelta: 0,
},
};
}
componentDidMount() {
const { navigation } = this.props;
Geolocation.getCurrentPosition((info) => {
let lat = info.coords.latitude;
let long = info.coords.longitude;
console.log(lat);
console.log(long);
var initialRegion = {
latitude: lat,
longitude: long,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
};
this.setState({ initialPosition: initialRegion });
});
}
render() {
const { modalVisible } = this.state;
const { navigate } = this.props.navigation;
// const token_data = token_value();
// console.log("token_homes_2st"+token_data);
return (
<View style={styles.container}>
<MapView
style={styles.map}
initialRegion={this.state.initialPosition}
showsUserLocation={true}
/>
</View>
);
}
}
export default Dashboard;
const styles = StyleSheet.create({
container: {
justifyContent: "center",
fontWeight: "400",
color: "#000",
fontFamily:
"Inter UI,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif",
},
map: {
height: 400,
width: 400,
justifyContent: "flex-end",
alignItems: "center",
},
});
import React, {useState, useEffect} from 'react';
import {StyleSheet, Text} from 'react-native';
import MapView, {Marker} from 'react-native-maps';
import Geolocation from '@react-native-community/geolocation';
const App = () => {
const [position, setPosition] = useState({
latitude: 10,
longitude: 10,
latitudeDelta: 0.001,
longitudeDelta: 0.001,
});
useEffect(() => {
Geolocation.getCurrentPosition((pos) => {
const crd = pos.coords;
setPosition({
latitude: crd.latitude,
longitude: crd.longitude,
latitudeDelta: 0.0421,
longitudeDelta: 0.0421,
});
}).catch((err) => {
console.log(err);
});
}, []);
return (
<MapView
style={styles.map}
initialRegion={position}
showsUserLocation={true}
showsMyLocationButton={true}
followsUserLocation={true}
showsCompass={true}
scrollEnabled={true}
zoomEnabled={true}
pitchEnabled={true}
rotateEnabled={true}>
<Marker
title='Yor are here'
// description='This is a description'
coordinate={position}/>
</MapView>
);
};
const styles = StyleSheet.create({
map: {
...StyleSheet.absoluteFillObject,
},
});
export default App;
我正在尝试使用 react-native 地图在 android 设备上的当前用户地理位置渲染地图。
这是我目前得到的:
import React, { Component } from 'react';
import {
View,
StyleSheet,
Dimensions,
} from 'react-native';
import MapView from 'react-native-maps';
const {width, height} = Dimensions.get('window')
const SCREEN_HEIGHT = height
const SCREEN_WIDTH = width
const ASPECT_RATIO = width / height
const LATITUDE_DELTA = 0.0922
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO
class MapComponent extends Component {
constructor() {
super()
this.state = {
initialPosition: {
latitude: 0,
longitude: 0,
latitudeDelta: 0,
longitudeDelta: 0,
},
}
}
componentDidMount() {
navigator.geolocation.getCurrentPosition((position) => {
var lat = parseFloat(position.coords.latitude)
var long = parseFloat(position.coords.longitude)
var initialRegion = {
latitude: lat,
longitude: long,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
}
this.setState({initialPosition: initialRegion})
},
(error) => alert(JSON.stringify(error)),
{enableHighAccuracy: true, timeout: 20000, maximumAge: 1000});
}
renderScreen = () => {
return (
<View style={styles.container}>
<MapView
style={styles.map}
initialRegion={this.state.initialPosition}/>
</View>
);
}
render() {
return (
this.renderScreen()
);
}
}
const 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,
},
});
export default MapComponent;
地图呈现,但未按预期呈现在当前设备地理位置中。 (它呈现在海洋中央)
权限已在 AndroidManifest.xml 设置为:
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
20 秒后,我收到一条提示,说 "Location request timed out" "code 3"
我做错了什么?
我不确定,但有一个 issue ("Geolocation timed out, code 3") 看起来相关
For anyone else struggling with this issue on android, try removing the maximumAge: 2000 option parameter. This option was causing geolocation to either timeout or crash the app.
它在我的身上运行得很好。我所做的唯一更改是 StyleSheet
.
container: {
position: 'absolute',
height : SCREEN_HEIGHT,
width : SCREEN_WIDTH,
justifyContent: 'flex-end',
alignItems: 'center',
}
此后,它呈现我的位置。您可以在之后添加标记以显示您的位置。
这对我有用。第三个选项是造成问题的原因。
navigator.geolocation.getCurrentPosition() =>{
},
err => {
},
{ enableHighAccuracy: false, timeout: 20000}, //this worked for me
navigator.geolocation.getCurrentPosition()
已弃用。
请改用 @react-native-community/geolocation
。
npm install @react-native-community/geolocation --save
1.npm 安装@react-native-community/geolocation --保存
2.import 来自“@react-native-community/geolocation”的地理位置;
3.navigator.geolocation.getCurrentPosition => Geolocation.getCurrentPosition
import React, { Component } from "react";
// global.currentScreenIndex = 'Dashboard';
//Import all required component
import {
View,
Text,
StyleSheet,
TouchableOpacity,
Image,
Modal,
TouchableHighlight,
StatusBar,
FlatList,
ActivityIndicator,
Button,
NetInfo,
} from "react-native";
import MapView, { Marker } from "react-native-maps";
import Geolocation from "@react-native-community/geolocation";
const MyStatusBar = ({ backgroundColor, ...props }) => (
<View style={[styles.statusBar, { backgroundColor }]}>
<StatusBar translucent backgroundColor={backgroundColor} {...props} />
</View>
);
class Dashboard extends Component {
constructor() {
super();
this.state = {
initialPosition: {
latitude: 0,
longitude: 0,
latitudeDelta: 0,
longitudeDelta: 0,
},
};
}
componentDidMount() {
const { navigation } = this.props;
Geolocation.getCurrentPosition((info) => {
let lat = info.coords.latitude;
let long = info.coords.longitude;
console.log(lat);
console.log(long);
var initialRegion = {
latitude: lat,
longitude: long,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
};
this.setState({ initialPosition: initialRegion });
});
}
render() {
const { modalVisible } = this.state;
const { navigate } = this.props.navigation;
// const token_data = token_value();
// console.log("token_homes_2st"+token_data);
return (
<View style={styles.container}>
<MapView
style={styles.map}
initialRegion={this.state.initialPosition}
showsUserLocation={true}
/>
</View>
);
}
}
export default Dashboard;
const styles = StyleSheet.create({
container: {
justifyContent: "center",
fontWeight: "400",
color: "#000",
fontFamily:
"Inter UI,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif",
},
map: {
height: 400,
width: 400,
justifyContent: "flex-end",
alignItems: "center",
},
});
import React, {useState, useEffect} from 'react';
import {StyleSheet, Text} from 'react-native';
import MapView, {Marker} from 'react-native-maps';
import Geolocation from '@react-native-community/geolocation';
const App = () => {
const [position, setPosition] = useState({
latitude: 10,
longitude: 10,
latitudeDelta: 0.001,
longitudeDelta: 0.001,
});
useEffect(() => {
Geolocation.getCurrentPosition((pos) => {
const crd = pos.coords;
setPosition({
latitude: crd.latitude,
longitude: crd.longitude,
latitudeDelta: 0.0421,
longitudeDelta: 0.0421,
});
}).catch((err) => {
console.log(err);
});
}, []);
return (
<MapView
style={styles.map}
initialRegion={position}
showsUserLocation={true}
showsMyLocationButton={true}
followsUserLocation={true}
showsCompass={true}
scrollEnabled={true}
zoomEnabled={true}
pitchEnabled={true}
rotateEnabled={true}>
<Marker
title='Yor are here'
// description='This is a description'
coordinate={position}/>
</MapView>
);
};
const styles = StyleSheet.create({
map: {
...StyleSheet.absoluteFillObject,
},
});
export default App;