React Native Maps 用户位置更新后地图不居中、朝向不旋转问题

你的代码存在以下几个核心问题，修改后即可实现导航级的跟随效果： #

问题汇总 #

1. 地图属性配置错误：仅使用了initialCamera属性，该属性仅在地图首次加载时生效，后续camera状态变更不会同步到地图组件。同时开启的followsUserLocation属性会和自定义camera控制逻辑冲突，导致自定义更新失效。
2. 异步状态取值错误：setHeading是React异步更新方法，调用后立刻读取heading状态拿到的是更新前的旧值，导致camera配置中的朝向永远滞后。
3. 位置变更判断逻辑失效：myPosition是回调内部的块级变量，每次触发回调都会重新声明，用于对比的myLastPosition每次取到的都是undefined，判断逻辑完全不生效。
4. 重复注册监听&内存泄漏：useEffect的依赖项设为camera，每次更新camera都会重新执行位置监听注册，不仅产生性能损耗，还会导致回调逻辑混乱，且没有配置监听卸载逻辑。

修改后完整代码 #

1. 初始状态配置 #

import { useRef } from 'react';

const [latitude, setLatitude] = useState(38.889815);
const [longitude, setLongitude] = useState(-77.005900);
const [heading, setHeading] = useState(0);
// 新增ref存储上一次位置信息，避免状态更新触发不必要重渲染
const lastPositionRef = useRef(null);

const GEOLOCATION_OPTIONS = {
    pitch: 65,
    altitude: 100,
    zoom: 17,
};

const [camera, setCamera] = useState({
    center: {
        latitude: latitude,
        longitude: longitude
    },
    heading: heading,
    pitch: GEOLOCATION_OPTIONS.pitch,
    zoom: GEOLOCATION_OPTIONS.zoom,
    altitude: GEOLOCATION_OPTIONS.altitude
});

2. 位置监听逻辑 #

function getCurrentLocation() {
    const watchId = Geolocation.watchPosition(
        position => {
            const myPosition = position.coords;
            // 用ref存储的上一次位置做精准对比，避免重复更新
            if (
                !lastPositionRef.current || 
                myPosition.latitude !== lastPositionRef.current.latitude || 
                myPosition.longitude !== lastPositionRef.current.longitude ||
                myPosition.heading !== lastPositionRef.current.heading
            ) {
                // 先更新ref
                lastPositionRef.current = myPosition;
                // 直接使用最新的位置数据更新camera，不要依赖未更新的状态值
                setCamera({
                    center: {
                        latitude: myPosition.latitude,
                        longitude: myPosition.longitude
                    },
                    heading: myPosition.heading,
                    pitch: GEOLOCATION_OPTIONS.pitch,
                    zoom: GEOLOCATION_OPTIONS.zoom,
                    altitude: GEOLOCATION_OPTIONS.altitude
                });
                // 按需更新单独的位置状态，非必须
                setLatitude(myPosition.latitude);
                setLongitude(myPosition.longitude);
                setHeading(myPosition.heading);
            }
        },
        // 新增错误回调，方便排查定位问题
        (error) => console.log('定位异常：', error),
        {
            enableHighAccuracy: true,
            distanceFilter: 1, // 位置变化超过1米才触发更新，减少无用渲染
            headingFilter: 1, // 朝向变化超过1度才触发更新
        }
    );
    // 返回监听清理函数
    return () => Geolocation.clearWatch(watchId);
};

useEffect(() => {
    const clearWatch = getCurrentLocation();
    return clearWatch; // 组件卸载时自动清除位置监听，避免内存泄漏
}, []); // 空依赖，仅在组件挂载时注册一次监听

3. 地图组件配置 #

<View style={{ flex: 1 }}>
    <MapView
        ref={(mapView) => { _mapView = mapView }}
        provider={PROVIDER_GOOGLE}
        scrollEnabled={false}
        pitchEnabled={false}
        rotateEnabled={false} // 保留禁止用户手动旋转，不影响程序自动更新朝向
        loadingEnabled={true}
        moveOnMarkerPress={true}
        showsUserLocation={true}
        showsBuildings={false}
        showsCompass={true}
        showsMyLocationButton={false}
        followsUserLocation={false} // 关闭系统自带跟随，避免和自定义camera逻辑冲突
        style={styles.mapMain}
        userLocationPriority={'high'}
        minZoomLevel={GEOLOCATION_OPTIONS.zoom}
        maxZoomLevel={GEOLOCATION_OPTIONS.zoom}
        initialCamera={camera}
        camera={camera} // 新增camera属性，绑定状态实现受控更新
    >
    </MapView>
</View>

测试注意事项 #

iOS模拟器的自定义位置功能仅能修改经纬度，不会返回朝向数据，测试朝向旋转效果时可以选择Features > Location > Freeway Drive模拟行驶场景，即可看到地图随移动和转向自动更新。

内容的提问来源于stack exchange，提问作者Chaudhry Talha