当我打开地图时，为什么它会延迟显示当前的位置标记

Question

我想做的是在我的应用程序中实现一个映射功能。要做到这一点，我必须使用react-native-maps和expo-location。地图没有任何错误，但当我打开它时，它会显示地图的一部分，2-3秒后会显示当前位置标记。

import React,{ useState, useEffect, useRef} from 'react';
import MapView, {Marker, PROVIDER_GOOGLE} from 'react-native-maps';
import { StyleSheet, Image , Text, View} from 'react-native';
import * as Location from 'expo-location';
import { 
LocationView ,
LocationBtn,
} from '../components/styles';
import { MaterialIcons } from '@expo/vector-icons';
const Map = (props) =>{
const [mapRegion, setMapRegion] = useState(null);
const _map = useRef(null)
useEffect(() => {
(async () => {
let { status } = await Location.requestForegroundPermissionsAsync();
if (status !== 'granted') {
setErrorMsg('Permission to access location was denied');
return;
}
console.log('status', status)

let location = await Location.getCurrentPositionAsync({});
setMapRegion({
longitude: location.coords.longitude,
latitude: location.coords.latitude,
longitudeDelta: 0.0922,
latitudeDelta: 0.0421
});

// mapRef.current.animateToRegion(mapRegion, 3 * 1000);
})();
}, [])
console.log(mapRegion)

return(
<View style={{ flex: 1}}>
<MapView
region={mapRegion}
provider={PROVIDER_GOOGLE}
style={styles.map}
mapType={props.mapType}
loadingEnabled={false}
initialRegion={mapRegion}
userInterfaceStyle='light'
showsTraffic={true}
ref={_map}
// zoomEnabled={true}
// onMapReady={mapRegion}
>
{mapRegion != null &&
<Marker 
coordinate={mapRegion}
>
<Image source={require('../assets/marker.png')} style={{height: 90, width: 90}} />
</Marker>
}
</MapView>
<LocationView>
<LocationBtn 
>
<MaterialIcons 
name="my-location" 
size={30}
color="black"
style={{alignSelf: 'center', marginTop: 13}}
/>
</LocationBtn>
</LocationView>  
</View>  
)
} 

const styles = StyleSheet.create({
map: {
height: '100%', 
},
})

export default Map;

当用户打开地图时，我如何立即显示当前的位置制作者，而不会有任何延迟。

Answer 1

方法Location.getCurrentPositionAsync({})是异步的，根据设备的不同，可能需要一段时间才能获得用户的位置。

您可以在之前获取用户在屏幕上的位置，并使用道具或导航参数传递位置。