React Native Maps自定义Marker定位偏移问题排查

在使用react-native-maps的MapView时，你自定义的MyProfileMarker没有将红色标记尖端对准指定经纬度，核心原因是Marker默认以组件中心对齐坐标，而我们需要让标记的底部尖端对应坐标点。可以通过以下两步解决：

1. 设置Marker的anchor属性 #

react-native-maps的Marker组件提供了anchor属性，用来指定组件上哪个点与地图坐标绑定。默认值是{ x: 0.5, y: 0.5 }（组件中心），我们需要改为{ x: 0.5, y: 1 }，让组件的底部中心对准坐标：

<Marker
    key={'currentUserLocation'}
    coordinate={{
        latitude: location?.coords.latitude || 1.290270,
        longitude: location?.coords.longitude || 103.851959,
    }}
    style={{zIndex: 9999}}
    anchor={{ x: 0.5, y: 1 }} // 关键：设置底部中心对齐坐标
>
    <MyProfileMarker/>
</Marker>

2. 微调自定义Marker组件的布局 #

当前自定义组件的容器使用justifyContent: 'center'，会让图标居中显示，导致标记尖端不在容器底部。调整容器的对齐方式，让图标靠底部：

const styles = StyleSheet.create({
    container: {
        width: wp('80%'),
        height: wp('80%'),
        borderRadius: wp('40%'),
        alignItems: 'center',
        justifyContent: 'flex-end', // 让图标靠容器底部
        paddingBottom: wp('2%'), // 可选：根据图标大小微调尖端位置
        backgroundColor: 'rgba(183,56,68,0.1)',
    },
});

原理说明 #

• anchor={{x:0.5, y:1}} 告诉地图，Marker组件的水平中心、垂直底部这个点，就是地图上的目标经纬度位置。
• 调整自定义组件的justifyContent为flex-end，确保红色标记的尖端正好落在容器的底部中心，配合anchor设置就能精准对准坐标点。

这样修改后，红色圆圈的尖端就会和预期效果一样，准确指向指定的经纬度位置。

内容的提问来源于stack exchange，提问作者Jarliev Pérez