[英]How to get current location using react-native-maps
我正在尝试使用 react-native 地图在 android 设备上的当前用户地理位置处呈现 map。
这是我到目前为止所得到的:
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;
map 呈现,但不在当前设备地理位置中,如预期的那样。 (它呈现在海洋中间)
权限已在 AndroidManifest.xml 中设置为:
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
20 秒后,我收到一条警告,“位置请求超时”“代码 3”
我做错了什么?
我不确定,但存在一个看起来相关的问题(“地理位置超时,代码 3”)
对于在 android 上遇到此问题的其他人,请尝试删除 maximumAge: 2000 选项参数。 此选项导致地理定位超时或使应用程序崩溃。
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;
它在我的工作完美。 我所做的唯一更改是在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
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",
},
});
1.npm install @react-native-community/geolocation --save
2.从'@react-native-community/geolocation'导入地理位置;
3.navigator.geolocation.getCurrentPosition => Geolocation.getCurrentPosition
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.