react-native-maps筛选后缩放地图出现默认标记覆盖自定义标记问题

问题说明 #

初始渲染时功能正常，但通过REST API筛选标记后，缩放地图会出现默认标记覆盖自定义标记的情况，依赖库为react-native-maps。

相关代码 #

MapView 实现代码 #

<MapView
  ref={mapRef}
  rotateEnabled={false}
  shouldRasterizeIOS
  mapType="standard"
  style={styles.map}
  initialRegion={INITIAL_REGION}
  
>
  {data &&
    data?.map(item => (
      <CustomMarker
        item={item}
        key={item?.id}
        setSelectedMarkerId={(row: any) => {
          mapRef?.current?.animateToRegion(
            {
              latitude: Number(row?.lat),
              longitude: Number(row?.long),
              latitudeDelta: 0.002,
              longitudeDelta: 0.002,
            },
            1000,
          );
        }}
        coordinate={{
          latitude: Number(item?.lat),
          longitude: Number(item?.long),
        }}
      />
    ))}
</MapView>

自定义Marker 组件代码 #

const CustomMarker = ({ item, setSelectedMarkerId, setIsMarkerDetailShow , coordinate   }) => {
    const [tracksViewChanges, setTracksViewChanges] = useState(true);
 
    
  return (
    <Marker
    tracksViewChanges={tracksViewChanges}
      coordinate={coordinate}
      onPress={() => {
        setSelectedMarkerId(item);
        // setIsMarkerDetailShow(true);
      }}
      >
   <View>
   {item?.abribois ? (
        <Image
          source={require('src/assets/images/greenMarker.png')}
          style={{
            height: 30,
            width: 30,
            resizeMode: 'contain',
          }}
          onLoadEnd={() => setTracksViewChanges(false)}
        />
      ) : (
        <Image
          source={require('src/assets/images/blueMarker.png')}
          style={{
            height: 30,
            width: 30,
            resizeMode: 'contain',
          }}
          onLoadEnd={() => setTracksViewChanges(false)}
        />
      )}
   </View>
    </Marker>
  );
};

export default CustomMarker;

问题表现 #

• 筛选标记后缩放地图，默认红色标记会覆盖自定义的绿/蓝色标记
• 错误截图：

解决办法 #

1. 取消tracksViewChanges的动态切换 #

动态修改tracksViewChanges容易引发渲染冲突，直接固定设为false：

// 自定义Marker组件中移除useState，修改Marker属性
<Marker
  tracksViewChanges={false}
  coordinate={coordinate}
  onPress={() => {
    setSelectedMarkerId(item);
  }}
>

2. 确保筛选后数据是新数组引用 #

如果筛选后的data和原数组引用相同，组件可能不会正确重渲染，筛选时生成新数组：

// 示例筛选逻辑，返回新数组
const filteredData = Array.from(originalData).filter(item => /* 你的筛选条件 */);
setData(filteredData);

3. 给Marker添加唯一identifier #

帮助地图库准确识别每个标记，避免复用错误：

// 在CustomMarker的Marker组件中添加
<Marker
  tracksViewChanges={tracksViewChanges}
  coordinate={coordinate}
  identifier={String(item.id)}
  onPress={() => {
    setSelectedMarkerId(item);
  }}
>

4. 移除shouldRasterizeIOS属性 #

这个属性可能导致iOS端地图渲染异常，直接删掉试试：

<MapView
  ref={mapRef}
  rotateEnabled={false}
  // 移除shouldRasterizeIOS
  mapType="standard"
  style={styles.map}
  initialRegion={INITIAL_REGION}
>

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