RNMapbox长按事件无法显示自定义标记图标问题求助

针对你遇到的长按地图获取经纬度后，自定义标记无法显示的问题，结合你的环境和代码，给出以下几个排查方向和修复方案：

1. 调整图片资源加载位置 #

你当前将<Mapbox.Images>放在<ShapeSource>内部，这会导致图片资源在标记要渲染时才开始加载，时机滞后。正确的做法是将<Mapbox.Images>作为<Mapbox.MapView>的直接子节点，确保地图初始化阶段就完成图片资源的加载：

<Mapbox.MapView
  // 原有属性保持不变
>
  <Mapbox.Camera ... />
  {/* 将Images移到MapView下，确保提前加载 */}
  <Mapbox.Images nativeAssetImages={['map_marker_start']} />
  {mapPinFeatures && (
    <Mapbox.ShapeSource shape={mapPinFeatures}>
      <Mapbox.SymbolLayer
        id={'pin'}
        style={{ 
          iconImage: 'map_marker_start', 
          iconAllowOverlap: true, // 改为true避免被其他元素遮挡
          iconSize: 1, // 明确设置图标大小，防止默认值异常
          iconAnchor: 'bottom' // 设置锚点在底部，符合标记的常规显示逻辑
        }}
      />
    </Mapbox.ShapeSource>
  )}
</Mapbox.MapView>

2. 移除不必要的强制重渲染key #

你通过setMapKey(Date.now())强制ShapeSource重建，这可能导致组件状态不稳定，甚至图片资源还没加载完成就被销毁。尝试移除mapKey相关逻辑，直接更新shape属性即可，新版本的@rnmapbox/maps已经修复了ShapeSource数据更新的兼容性问题：

// 删除这两行代码
const [mapKey, setMapKey] = React.useState(Date.now())
setMapKey(Date.now())

// ShapeSource不再需要key属性
<Mapbox.ShapeSource shape={mapPinFeatures}>

3. 验证Feature的坐标与属性 #

确保Feature的坐标格式正确（Mapbox采用[经度, 纬度]顺序），同时可以给Feature添加明确的属性关联图标：

setMapPinFeatures({
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      id: 'collection',
      properties: {
        // 添加属性关联图标，和SymbolLayer的iconImage对应
        icon: 'map_marker_start'
      },
      geometry: {
        type: 'Point',
        coordinates: data.coordinates
      }
    }
  ]
})

4. 检查地图层级与遮挡 #

确保SymbolLayer的层级高于其他图层，或者设置iconAllowOverlap: true避免被底图元素遮挡。如果有其他图层（比如填充层、线层），可以给SymbolLayer添加minZoomLevel属性，确保在当前缩放级别下可见。

修改后的完整示例代码 #

import React, { useState, useRef } from 'react';
import { View } from 'react-native';
import Mapbox from '@rnmapbox/maps';

Mapbox.setAccessToken('<access token>')

export default function ExampleMap () {
  const [mapPinFeatures, setMapPinFeatures] = useState(null)
  const map = useRef(null)
  const camera = useRef(null)

  function onLongPress (data) {
    setMapPinFeatures({
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          id: 'collection',
          properties: {
            icon: 'map_marker_start'
          },
          geometry: {
            type: 'Point',
            coordinates: data.coordinates
          }
        }
      ]
    })
  }

  return (
    <View style={{ flex: 1, width: '100%' }}>
      <Mapbox.MapView
        ref={map}
        styleURL={Mapbox.StyleURL.Light}
        style={{ flex: 1, width: '100%' }}
        zoomEnabled
        pitchEnabled={false}
        logoEnabled={false}
        scaleBarEnabled={false}
        onLongPress={onLongPress}
      >
        <Mapbox.Camera
          ref={camera}
          animationMode="moveTo"
          defaultSettings={{ zoomLevel: 13, centerCoordinate: [-0.1996, 5.5837] }}
        />
        <Mapbox.Images nativeAssetImages={['map_marker_start']} />
        {mapPinFeatures && (
          <Mapbox.ShapeSource shape={mapPinFeatures}>
            <Mapbox.SymbolLayer
              id={'pin'}
              style={{ 
                iconImage: ['get', 'icon'], // 通过get表达式读取Feature的icon属性
                iconAllowOverlap: true,
                iconSize: 1,
                iconAnchor: 'bottom'
              }}
            />
          </Mapbox.ShapeSource>
        )}
      </Mapbox.MapView>
    </View>
  )
}

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