如何在React Native Maps与Expo中显示用户位置？已获位置却无法展示

核心问题：位置数据类型处理错误 #

你犯了两个关键错误：

• 将获取到的location对象转成了JSON字符串（JSON.stringify(location)），之后试图从字符串text上读取latitude和longitude属性——字符串不存在这些属性，导致坐标值为undefined，Marker无法显示。
• 忽略了Location.getCurrentPositionAsync()返回的坐标是嵌套在coords属性下的，而非直接在根对象上。

修复步骤 #

1. 直接从location状态提取坐标
   删除错误的字符串转换逻辑，直接从location对象中读取坐标：

   // 移除这段错误代码
   // let text = 'Waiting..';
   // if (errorMsg) {
   //    text = errorMsg;
   // } else if (location) {
   //    text = JSON.stringify(location);
   // }
   
   // 直接从location的coords属性取坐标，添加可选链避免报错
   let userLatitude = location?.coords?.latitude || 0;
   let userLongitude = location?.coords?.longitude || 0;
   

2. 给MapView设置初始显示区域
   地图需要明确初始展示的区域，否则可能默认显示在(0,0)位置，即使Marker存在也看不到：

   <MapView 
     style={styles.map}
     initialRegion={{
       latitude: userLatitude,
       longitude: userLongitude,
       latitudeDelta: 0.0922, // 控制地图缩放级别
       longitudeDelta: 0.0421,
     }}
   >
     {/* Marker代码 */}
   </MapView>
   

3. 完善状态提示逻辑
   将加载、错误提示与地图逻辑分离，避免干扰坐标获取：

   return (
       <View style={styles.layout}>
         {errorMsg && <Text>{errorMsg}</Text>}
         {!errorMsg && !location && <Text>正在获取位置...</Text>}
         <MapView 
           style={styles.map}
           initialRegion={{
             latitude: userLatitude,
             longitude: userLongitude,
             latitudeDelta: 0.0922,
             longitudeDelta: 0.0421,
           }}
         >
           {/* 仅当location存在时渲染Marker */}
           {location && (
             <MapView.Marker
               coordinate={{
                 latitude: location.coords.latitude, 
                 longitude: location.coords.longitude
               }}
               title="当前位置"
               description="你的位置"
             />
           )}
         </MapView>
       </View>
   );
   

完整修复后的核心代码 #

useEffect(() => {
  (async () => {
     let { status } = await Location.requestForegroundPermissionsAsync();
     if (status !== 'granted') {
       setErrorMsg('Permission to access location was denied');
       return;
     }

     let location = await Location.getCurrentPositionAsync({});
     setLocation(location);
   })();
}, []);

let userLatitude = location?.coords?.latitude || 0;
let userLongitude = location?.coords?.longitude || 0;

return (
    <View style={styles.layout}>
      {errorMsg && <Text>{errorMsg}</Text>}
      {!errorMsg && !location && <Text>正在获取位置...</Text>}
      <MapView 
        style={styles.map}
        initialRegion={{
          latitude: userLatitude,
          longitude: userLongitude,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      >
        {location && (
          <MapView.Marker
            coordinate={{
              latitude: location.coords.latitude, 
              longitude: location.coords.longitude
            }}
            title="当前位置"
            description="你的位置"
          />
        )}
      </MapView>
    </View>
);

内容的提问来源于stack exchange，提问作者Tom Wang