我正在尝试使用 react-native-maps 模块制作一个应用程序。 我可以通过 navigator.geolocation.watchPosition 获取设备位置,我还使用内置于 showUserLocation 属性中的 map 。 我怎样才能实现加载时的 map 会转到用户位置。看不到整个世界,也看不到硬编码的初始位置。
编辑: 这是我的 react-native-map 元素。该区域设置为硬编码初始 位置,我想将其更改为始终在用户位置加载。
<View style={styles.container}>
<MapView
style={styles.map}
region={this.state.initialPosition}
showsMyLocationButton={true}
loadingEnabled={true}
onRegionChange={(region)=> this.setState({ initialPosition:region })}
onLongPress={this.mapOnPress}
showsUserLocation={true}
>
我在应用程序中使用的位置来自这里,但加载很晚,通常超过 20 秒,所以我想跳过这 20 秒并立即加载用户位置。
this.watchID= navigator.geolocation.watchPosition((position)=>{
var lastRegion ={
latitude: lat,
longitude: lon,
longitudeDelta: LON_D,
latitudeDelta: LAT_D
}
this.setState({initialPosition:lastRegion})},(error)=>alert(error),{enableHighAccuracy:true,timeout:20,maximumAge:10})
有什么解决办法吗?感谢您的帮助:)
最佳答案
你可以试试这个,超时单位是毫秒。在RN中测试:44,
class Map extends Component {
constructor(props) {
super(props);
this.state = {
permissionState: false,
latitude: null,
longitude: null,
error: null,
};
}
componentDidMount() {
Platform.OS === 'android' && Platform.Version >= 23 ? this.requestMapPermission() : this.requestMap()
}
async requestMapPermission() {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION)
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
console.log('Granted');
this.watchId = navigator.geolocation.getCurrentPosition(
(position) => {
console.log('Position is watched');
this.setState({
permissionState: true,
latitude: position.coords.latitude,
longitude: position.coords.longitude,
error: null,
});
},
(error) => this.setState({error: error.message}),
{enableHighAccuracy: false, timeout: 20000, maximumAge: 1000},
);
} else {
console.log('not Granted');
this.setState({
permissionState: false,
});
}
} catch (err) {
console.warn(err)
}
}
requestMap() {
this.watchId = navigator.geolocation.watchPosition(
(position) => {
this.setState({
permissionState: true,
latitude: position.coords.latitude,
longitude: position.coords.longitude,
error: null,
});
},
(error) => this.setState({error: error.message, permissionState: false,}),
{enableHighAccuracy: false, timeout: 20000, maximumAge: 1000},
);
}
componentWillUnmount() {
navigator.geolocation.clearWatch(this.watchID);
}
render() {
var {height, width} = Dimensions.get('window');
return (
<View style={{height: 150, justifyContent: 'center'}}>
{
this.state.permissionState === true ?
<MapView
minZoomLevel={16}
style={{height: 150, marginBottom: 5, marginTop: 5}}
region={{
latitude: this.state.latitude,
longitude: this.state.longitude,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
}}>
<MapView.Marker
coordinate={{
latitude: (this.state.latitude + 0.00000),
longitude: (this.state.longitude + 0.00000),
}}>
<View>
<Icon name="place" size={40} color="#038FC0"/>
</View>
</MapView.Marker>
</MapView> :
<View style={{
borderWidth: 1,
borderColor: '#6f6f6f',
height: 150,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text>No Permission for location</Text>
</View>
}
</View>
);
}
}
const styles = StyleSheet.create({
map: {
...StyleSheet.absoluteFillObject,
}
});
export default Map;
关于android - React Native map 加载位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47563986/