如何在Expo CLI版React Native中实时在地图视图显示已获取的地理位置坐标？

我想要创建一个基于Expo CLI的React Native地理位置追踪系统，已通过expo-location库获取到地理位置坐标，并将这些坐标存储为字符串变量text。现在我希望在地图视图中实时显示这些坐标，请问该如何实现？

当前代码 #

import React, { useState, useEffect } from 'react';     //hooks for using react features without class 
import { Platform, Text, View, StyleSheet } from 'react-native'; 
import Device from 'expo-device'; 
import * as Location from 'expo-location';  //expo lib to get location coordinates 

export default function App() {   
  const [location, setLocation] = useState(null); 
  const [errorMsg, setErrorMsg] = useState(null);  

  useEffect(() => {
    (async () => {
      if (Platform.OS === 'android' && !Device.isDevice) {
        setErrorMsg('Try it on your device!');
        return;
      }
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        setErrorMsg('Permission to access location was denied');
        return;
      }
      let location = await Location.getCurrentPositionAsync({});
      setLocation(location);
    })();   
  }, []);  

  let text = 'Waiting..';   
  if (errorMsg) {
    text = errorMsg;   
  } else if (location) {
    text = JSON.stringify(location);   
  }  

  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>{text}</Text>
    </View>   
  ); 
} 

const styles = StyleSheet.create({   
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,   
  },   
  paragraph: {
    fontSize: 18,
    textAlign: 'center',   
  }, 
});

实现步骤 #

1. 安装地图依赖 #

执行命令安装Expo官方地图组件：

npx expo install expo-maps

2. 修改代码实现实时追踪与地图显示 #

当前代码仅单次获取位置，需改为实时监听位置变化并集成地图组件。修改后的完整代码如下：

import React, { useState, useEffect } from 'react';
import { Platform, Text, View, StyleSheet } from 'react-native';
import Device from 'expo-device';
import * as Location from 'expo-location';
import MapView, { Marker } from 'expo-maps'; // 引入地图组件

export default function App() {
  // 存储实时坐标
  const [currentCoords, setCurrentCoords] = useState(null);
  const [errorMsg, setErrorMsg] = useState(null);
  // 保存监听订阅，用于组件卸载时取消监听
  const [locationSubscription, setLocationSubscription] = useState(null);

  useEffect(() => {
    const setupLocationTracking = async () => {
      // 安卓模拟器检查
      if (Platform.OS === 'android' && !Device.isDevice) {
        setErrorMsg('请在真实设备上测试！');
        return;
      }

      // 请求位置权限
      const { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        setErrorMsg('位置权限被拒绝');
        return;
      }

      // 实时监听位置变化
      const subscription = await Location.watchPositionAsync(
        {
          accuracy: Location.Accuracy.High, // 高精度定位
          timeInterval: 1000, // 每秒更新一次
          distanceInterval: 1, // 移动1米更新一次
        },
        (newLocation) => {
          // 更新当前坐标
          setCurrentCoords(newLocation.coords);
        }
      );

      setLocationSubscription(subscription);
    };

    setupLocationTracking();

    // 组件卸载时取消位置监听，避免内存泄漏
    return () => {
      if (locationSubscription) {
        locationSubscription.remove();
      }
    };
  }, []);

  // 准备状态文本
  let statusText = '等待定位...';
  if (errorMsg) {
    statusText = errorMsg;
  } else if (currentCoords) {
    statusText = `纬度: ${currentCoords.latitude.toFixed(6)}\n经度: ${currentCoords.longitude.toFixed(6)}`;
  }

  return (
    <View style={styles.container}>
      {/* 显示定位状态 */}
      <Text style={styles.statusText}>{statusText}</Text>
      {/* 实时地图视图 */}
      {currentCoords && (
        <MapView
          style={styles.map}
          // 初始地图区域
          initialRegion={{
            latitude: currentCoords.latitude,
            longitude: currentCoords.longitude,
            latitudeDelta: 0.005, // 数值越小地图越放大
            longitudeDelta: 0.005,
          }}
          // 实时更新地图区域
          region={{
            latitude: currentCoords.latitude,
            longitude: currentCoords.longitude,
            latitudeDelta: 0.005,
            longitudeDelta: 0.005,
          }}
        >
          {/* 当前位置标记 */}
          <Marker
            coordinate={{
              latitude: currentCoords.latitude,
              longitude: currentCoords.longitude,
            }}
            title="当前位置"
            description="实时更新的定位点"
          />
        </MapView>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 20,
  },
  statusText: {
    fontSize: 16,
    textAlign: 'center',
    marginBottom: 10,
    paddingHorizontal: 10,
  },
  map: {
    flex: 1,
    width: '100%',
  },
});

关键修改说明 #

• 实时位置监听：用watchPositionAsync替代单次获取的getCurrentPositionAsync，设置更新间隔与精度，实现持续追踪
• 地图组件集成：使用expo-maps的MapView展示地图，Marker标记当前位置，实时同步坐标变化
• 资源清理：组件卸载时取消位置监听，避免不必要的资源消耗
• 数据处理优化：单独存储坐标对象，简化地图组件参数传递，提升代码可读性

内容的提问来源于stack exchange，提问作者fahad yaseen