呈現自定義的註釋與下面的視圖上Mapbox反應本土

Question

Custom annotation on mapbox

我怎樣才能做到這一點使用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] 
    })) 
} 

Geoquery trigger：

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