用于 React native 的 MapBox GL SymbolLayer

Question

我试图用 SymbolLayer 标记一个特定的坐标，但我找不到任何 documentation/examples 特定于 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 传递给它，但它给出了一个重载错误，因为点属性不存在。这是我从文档中了解到的内容。

Answer 1

如果你只需要标记一个坐标，而不是SymbolLayer，你可以使用MapboxGL.MarkerView。您可以在 MarkerView 中创建一个视图，并在其中添加您想要的 logo/text 内容。它应该适用于 iOS 和 android。这是一个例子：

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

用于 React native 的 MapBox GL SymbolLayer

MapBox GL SymbolLayer for React native

javascript

mapbox

mapbox-gl

react-native

mapbox-gl-js