如何用mapbox编程添加标记/注释并对本机做出反应
如何用mapbox编程添加标记/注释并对本机做出反应
提问于 2018-01-21 19:09:37
我是新的反应本机，找不到任何文档，如何添加标记/注解编程到地图使用mapbox。
我们使用的是地火查询，当兴趣点在范围内时触发。
在触发器中，我想插入标记。
我找到的所有文档都是这样的：https://www.mapbox.com/help/first-steps-react-native-sdk/，它在初始化和呈现过程中添加标记。
，这是到目前为止我的代码
render () {
const {navigate} = this.props.navigation;
return (
<View style ={{flex: 1, position: 'relative'}}>
<Mapbox.MapView
styleURL={Mapbox.StyleURL.Dark}
zoomLevel={15}
centerCoordinate={[11.256, 43.770]}
ref={map => { this.map = map; }}
style={{flex: 1}}>
{this.renderAnnotations([11.256, 43.770])}
</Mapbox.MapView>
<View style={styles.menuMainContainer}>
{this.state.menuStatus ? <Animatable.View style={styles.menuSubcontainer} animation={"bounceIn"}>
<View style={{justifyContent: 'space-between', justifyContent: 'center', flex: 1, marginBottom: 50}}>
<View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
<MenuOptions imageSource={Images.lightIcon} menuTag="trash" name="Basureros"/>
<MenuOptions imageSource={Images.lightIcon} menuTag="holes" name="Huecos"/>
</View>
<View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
<MenuOptions imageSource={Images.lightIcon} menuTag="hydrants" name="Hidrantes"/>
<MenuOptions imageSource={Images.lightIcon} menuTag="parking" name="Estacionamiento"/>
</View>
<View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
<MenuOptions imageSource={Images.lightIcon} menuTag="others" name="Otros"/>
</View>
</View>
</Animatable.View> : null
}
</View>
<View style ={styles.bottomContainer}>
<TouchableOpacity style={styles.buttons}>
<Text style={styles.buttonText}>Boton_1</Text>
</TouchableOpacity>
<TouchableOpacity onPress ={this._takePhotofromCamera} style={styles.buttons}>
<Text style={styles.buttonText}>Agregar Reportes</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttons} onPress = {() => this.toggleMenuStatus()}>
<Text style={styles.buttonText}>Boton_3</Text>
</TouchableOpacity>
</View>
</View>
)
}
}
renderAnnotations = (location) =>{
console.log('entro renderan2')
return(
<Mapbox.PointAnnotation
key='pointAnnotation'
id='pointAnnotation'
coordinate={location}>
<View style={styles.annotationContainer}>
<View style={styles.annotationFill} />
</View>
<Mapbox.Callout title='Look! An annotation!' />
</Mapbox.PointAnnotation>
)
}
this.state.geoQuery.on("key_entered", function(key, location, distance) {
console.log(key + " is located at [" + location + "] which is within the query (" + distance.toFixed(2) + " km from center)");
this.renderAnnotations();
})我得到:错误：this.renderAnnotations不是一个函数
我还尝试在this.state.geoQuery中复制整个函数，没有错误，但是标记也没有显示。
this.state.geoQuery.on("key_entered", function(key, location, distance) {
console.log(key + " is located at [" + location + "] which is within the query (" + distance.toFixed(2) + " km from center)");
return(
<Mapbox.PointAnnotation
key='pointAnnotation'
id='pointAnnotation'
coordinate={location}>
<View style={styles.annotationContainer}>
<View style={styles.annotationFill} />
</View>
<Mapbox.Callout title='Look! An annotation!' />
</Mapbox.PointAnnotation>
)});谢谢
Stack Overflow用户
发布于 2018-01-21 19:16:43
我的用户反应-本地地图，所以我不会确切地知道，但您要问的正是文档：https://www.mapbox.com/help/first-steps-react-native-sdk/#add-an-annotation。
编辑:你的错误来了，对吗？
this.state.geoQuery.on("key_entered", function(key, location, distance) {
console.log(key + " is located at [" + location + "] which is within the query (" + distance.toFixed(2) + " km from center)");
this.renderAnnotations();
})如果是这样的话，那么问题可能是，“这个”在触发时超出了您的函数的范围。
试试这个：
this.state.geoQuery.on("key_entered", (key, location, distance) => {
console.log(key + " is located at [" + location + "] which is within the query (" + distance.toFixed(2) + " km from center)");
this.renderAnnotations();
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48370642
复制相关文章
相似问题
腾讯云开发者
