React Native Maps GeoJson如何根据标记对象值条件渲染不同标记组件？

要实现根据标记对象的具体值渲染不同组件，你需要把markerComponent从直接传入组件实例改成传入一个接收标记属性的函数组件，在函数内部做条件判断后返回对应组件。

具体实现方式：

• 定义一个函数组件，接收GeoJson解析出的marker参数（该参数包含标记的properties等核心属性）
• 在函数内根据marker.properties中的目标字段（比如你自定义的类型、状态字段）进行条件判断
• 返回对应的自定义标记组件

修改后的完整代码示例：

<MapView
  ref={mapRef}
  rotateEnabled={false}
  scrollDuringRotateOrZoomEnabled={false}
  loadingEnabled={true}
  provider={PROVIDER_GOOGLE}
  style={styles.map}
  options={{
    disableDefaultUI: true,
  }}
  initialRegion={initialRegion}
>
  <Geojson
    // 传入函数组件，接收marker参数做判断
    markerComponent={(marker) => {
      // 从标记的properties中获取用于判断的字段，这里假设是type
      const markerType = marker.properties?.type;
      
      // 根据字段值返回不同组件
      if (markerType === 'car') {
        return <CarMarker height={40} width={80} />;
      } else if (markerType === 'bike') {
        return <BikeMarker size={30} />;
      } else {
        // 兜底的默认标记组件
        return <DefaultMarker />;
      }
    }}
    geojson={geoJsonDummy}
    strokeColor="red"
    fillColor="green"
    strokeWidth={2}
  />
</MapView>

需要确保你的GeoJSON数据中，每个Point类型的Feature包含对应的properties字段，示例如下：

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [120.123, 30.456]
  },
  "properties": {
    "type": "car",
    // 其他自定义属性
  }
}

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