适用于React本机的MapBox GL SymbolLayer

问题描述

我试图用SymbolLayer标记一个特定的坐标，但是为此我找不到任何特定于React Native的文档/示例。

  return (
    <MapboxGL.MapView
      style={styles.map}
      logoEnabled={false}
      localizeLabels={true}>
      <MapboxGL.Camera
        zoomLevel={15}
        animationMode={'flyTo'}
        animationDuration={2000}
        centerCoordinate={coordinates}
      />
      <AddressTextBox placeName={placeName}/>
      <MapboxGL.SymbolLayer></MapboxGL.SymbolLayer>
    </MapboxGL.MapView>
  );

https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#symbol

https://github.com/nitaliano/react-native-mapbox-gl/blob/master/docs/SymbolLayer.md

我只发现了这个。由于不使用其他任何层，我应该将什么属性传递给组件？我该如何精确地传递要标记的坐标？

我尝试将point={}和symbolPlacement传递给它，但是由于点属性不存在，它会产生重载错误。这就是我从文档中了解的内容。

解决方法

如果仅需要标记一个坐标而不是SymbolLayer，则可以使用MapboxGL.MarkerView。您可以在MarkerView内创建一个View，然后在其中添加所需的徽标/文字。它应该在iOS和android上都可以工作。这是一个示例：

https://medium.com/javascript-in-plain-english/mark-a-coordinate-on-mapbox-map-in-react-native-5d21c71ed46e