使用以下视图渲染自定义注释，在Mapbox中使用react native

Question

Custom annotation on mapbox

如何使用React Native中的Mapbox和Annotations实现此目的。我已经尝试嵌套注释，渲染为折线但未获得所需的结果。有人可以帮忙解决这个问题吗？

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]
    }))
}

Geoquery trigger：

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