React Native中MapboxGL.MapView安卓端自定义Marker与信息窗口问题问询

根因说明 #

你遇到的问题都是@react-native-mapbox-gl/maps 8.4.0版本安卓端的已知兼容缺陷：

• PointAnnotation未指定id/缺少点击事件回调时会触发原生崩溃
• PointAnnotation的子视图在安卓端不会触发远程图片重新渲染
• MarkerView的原生视图和地图手势同步逻辑存在缺陷，导致拖动缩放偏移
• ShapeSource未正常渲染是因为你传入的shape格式不符合GeoJSON规范

最优实现方案（兼容安卓+iOS，无偏移、支持远程图片） #

1. 采用ShapeSource + SymbolLayer + 自定义悬浮Callout组合实现，代码修改如下： #

首先新增状态：

// 新增状态
const [markers, setMarkers] = useState([]);
const [selectedMarker, setSelectedMarker] = useState(null);
const [calloutPosition, setCalloutPosition] = useState({x: 0, y: 0});
const mapRef = useRef(null);

修改MapView绑定ref：

<MapboxGL.MapView
  ref={mapRef}
  // 保留你原有其他属性
>

补充Marker和图层逻辑：

{/* 提前注册所有用到的图片，支持远程/本地 */}
<MapboxGL.Images
  images={{
    // 可以传入多个marker用到的图片，键名自定义即可
    customMarker: 'https://你的远程marker图标地址',
    userAvatar: ImageGallery?.uri
  }}
/>

{/* Marker图层 */}
<MapboxGL.ShapeSource
  id='allMarkers'
  shape={{
    type: 'FeatureCollection',
    features: markers.map(item => ({
      type: 'Feature',
      id: item.id,
      properties: {
        icon: 'customMarker', // 对应上面Images里注册的键名
        avatar: item.avatarUrl,
        title: item.title
      },
      geometry: {
        type: 'Point',
        coordinates: [item.longitude, item.latitude]
      }
    }))
  }}
  onPress={async (e) => {
    const feature = e.features[0];
    setSelectedMarker(feature.properties);
    // 计算当前点位在屏幕上的坐标，用于定位Callout
    const point = await mapRef.current.getPointInView(feature.geometry.coordinates);
    setCalloutPosition({x: point[0], y: point[1]});
  }}
>
  <MapboxGL.SymbolLayer
    id='markersLayer'
    style={{
      iconImage: ['get', 'icon'],
      iconSize: 0.8,
      iconAllowOverlap: true, // 禁止marker被地图自动隐藏
      iconAnchor: 'bottom' // 锚点设置为底部，保证marker底部对准坐标点
    }}
  />
</MapboxGL.ShapeSource>

然后在MapView同级渲染自定义Callout：

{/* 自定义信息窗口，绝对定位无偏移 */}
{selectedMarker && (
  <View 
    style={{
      position: 'absolute',
      left: calloutPosition.x - 60, // 调整偏移量让箭头对准marker
      top: calloutPosition.y - 120, // 调整偏移量让窗口在marker上方
      width: 120,
      alignItems: 'center'
    }}
    pointerEvents='box-none'
  >
    <View style={{
      backgroundColor: '#fff',
      borderRadius: 8,
      padding: 8,
      marginBottom: 4
    }}>
      <Image 
        source={{uri: selectedMarker.avatar}} 
        style={{width: 80, height: 80, borderRadius: 40}}
      />
      <Text style={{textAlign: 'center', marginTop: 4}}>{selectedMarker.title}</Text>
    </View>
    {/* 底部箭头 */}
    <View style={{
      width: 0,
      height: 0,
      backgroundColor: 'transparent',
      borderStyle: 'solid',
      borderLeftWidth: 8,
      borderRightWidth: 8,
      borderTopWidth: 10,
      borderLeftColor: 'transparent',
      borderRightColor: 'transparent',
      borderTopColor: '#fff'
    }} />
  </View>
)}
{/* 点击地图空白处关闭Callout */}
<MapboxGL.MapView
  // 原有属性保留
  onPress={() => setSelectedMarker(null)}
>

2. 如需要继续使用PointAnnotation的临时修复方案 #

• 必须给每个PointAnnotation指定唯一的id属性，避免点击崩溃
• 远程图片先下载到本地缓存后再传入Image的source，安卓端PointAnnotation的子Image不支持直接渲染远程uri，可以用react-native-fs下载远程图片到本地缓存目录，拿到本地路径后再渲染

3. 版本升级建议 #

原@react-native-mapbox-gl/maps已经停止维护，建议升级到社区维护的@rnmapbox/maps 10.x以上版本，上述PointAnnotation、MarkerView的缺陷都已修复，无需额外兼容处理。

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