如何用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>
)});谢谢
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-01-23 00:10:42
在与Mapbox支持直接聊天后，他们告诉我PointAnnotation是遗留的，应该使用ShapeSource和SymbolLayer，它有更好的性能。以下是如何做到这一点：
<Mapbox.MapView
key='mainmap'
textureMode={true}
pitch={60}
ref={(c) => this._map = c}
onPress={this.onPress}
styleURL={Mapbox.StyleURL.Light}
zoomLevel={17}
maxZoomLevel={20}
minZoomLevel={15}
centerCoordinate={this.initCenterLocation()}
style={{ flex: 1 }}
showUserLocation={true}
userTrackingMode={Mapbox.UserTrackingModes.FollowWithHeading}
>
<Mapbox.ShapeSource
id='exampleShapeSource'
shape={this.state.featureCollection}
onPress={(feature) => this.onShapeSourceLayer(feature)}
images={{ assets: ['pin', 'm1_marker', 'm2_marker', 'm3_marker', 'm4_marker'] }}>
<Mapbox.SymbolLayer id='exampleIconName' minZoomLevel={1} style={stylesIcon.icon} />
</Mapbox.ShapeSource>
</Mapbox.MapView>插入新的注释/要点：
this.setState({
featureCollection: Mapbox.geoUtils.addToFeatureCollection(
this.state.featureCollection,
Mapbox.geoUtils.makeFeature({ type: 'Point', coordinates: location }, { icon: iconImage, key: key }),
),
});注记功能：
onShapeSourceLayer(e) {
const feature = e.nativeEvent.payload;
this.setState({
annotationKey: feature.properties.key
}, function () {
this.togglePostModal(true)
});
}Stack Overflow用户
发布于 2019-03-09 10:07:15
简单：
constructor() {
this.state = {
myMarker: [0, 0]//intial 0
};
}
<Mapbox.MapView key='mainmap'>
<Mapbox.PointAnnotation
key="key1"
id="id1"
title="Test"
coordinate={this.state.myMarker}>
</Mapbox.PointAnnotation>
</Mapbox.MapVie>
update latitude and longitude :
updateMyMarker(data){
this.setState({myMarker: [data.Lng, data.Lat]})
}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
复制相关文章
相似问题
腾讯云开发者
