在反应本机的 Mapbox 上使用以下视图呈现自定义注释

Question

Custom annotation on mapbox

我如何在 React Native 中使用 Mapbox 和注释来实现这一点。我试过嵌套注释，呈现为多段线，但没有得到想要的结果。谁能帮忙解决这个问题？

Answer 1

查看此工作代码。终于找到正确的方法了:

在我的 render() 里面：

<Mapbox.MapView
    ref={map => { this.map = map; }}
    styleURL={Mapbox.StyleURL.Basic}
    zoomLevel={15}
    centerCoordinate={[11.256, 43.770]}
    style={{flex: 1}}
    showUserLocation={true}
    userTrackingMode={Mapbox.UserTrackingModes.Follow}>

    {this.state.markers.map(marker => (
    <Mapbox.PointAnnotation
      key= {marker.title}
      id= {marker.title}
      coordinate={marker.coordinates}>

    <View style={styles.annotationContainer}>
      <View style={styles.annotationFill} />
    </View>
    <Mapbox.Callout title={marker.title} />
    </Mapbox.PointAnnotation>
    ))}

</Mapbox.MapView>

要更新的函数 this.state.markers :

_getAnnotations = (key, location) => {
    let newelement = {
      title: key,
      coordinates: location,
    };
    this.setState(prevState => ({
      markers: [...prevState.markers, newelement]
    }))
}

地理查询 trigger :

this.state.geoQuery.on("key_entered", (key, location, distance) => {
    this._getAnnotations(key,location);
});

在反应本机的 Mapbox 上使用以下视图呈现自定义注释

Rendering custom annotation with following view on Mapbox in react native

mapbox-gl

react-native