- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我是 native react 的新手,找不到任何关于如何使用 mapbox 以编程方式向 map 添加标记/注释的文档。
我们正在使用 geofire 查询,当兴趣点在范围内时触发。
在触发器内,我想插入标记。
我找到的所有关于它的文档都是这样的: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.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>
)});
最佳答案
在直接与 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)
});
}
关于react-native - 如何使用 mapbox 以编程方式添加标记/注释并对 native 使用react,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48370642/
刚刚通过 cocoapods 安装了 MapboxGL。我在我的 ViewController 中初始化它,就像给出的示例一样: @IBOutlet weak var mapViewWrapper:
有没有办法更改mapbox-gl-js图标图像的颜色? 取自https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/的代码不会将标记颜色
我正在重写来自 Mapbox.js 的路线规划 Web 应用程序至 Mapbox GL JS图书馆。 几乎所有功能都已实现,但由于 的滞后、不流畅的动画和普遍的缓慢,它几乎无法使用。 map 层 .
我的问题是,如何从 MapBox 服务获取指定路线的海拔剖面图。 在输入中,我们将路径/路线作为坐标数组(纬度、经度)。作为结果,我们想要获得坐标对的数组 - 高程。 如果高程数据的分辨率高于提供的路
如何检查 map 上是否显示了 Mapbox 栅格图层? 我的目标是停止加载动画。我知道我可以检查 map 本身是否准备就绪。 map.on('ready', someFunction) 除了针对特定
https://codepen.io/m12n/pen/XWNRZMg?editors=0010 mapboxgl.accessToken = "pk.eyJ1IjoiaW50ZWxsaWdlbm
我想在我的 map 上添加一个自定义标记。我正在使用 mapbox gl 脚本。 我发现与此主题相关的唯一文档是这个 https://www.mapbox.com/mapbox-gl-js/examp
我需要mapbox gl的某种Google map “空闲”事件。 当触发每个事件并且 map 停止放大/缩小拖动等并且每个图层都已加载时, map 处于空闲状态。 我必须使用此代码 map.on
有没有办法在离线设置中使用 Mapbox GL(询问 JS 和 native )?使用 MBTiles,您可以使用 MBTiles 文件或提取光栅图像。我想知道是否有任何类似的东西可以让 Mapbox
我有一个矩形,需要用正方形填充它。我找到中心线并想沿着该线放置方 block 。但是有没有简单的方法可以在 mapboxgl 中与 turfjs 等其他库一起绘制正方形?就像设置正方形的中心和边长并获
我对 MapBox 中的标记有疑问。我有多个标记,我想对其进行聚类。我使用 MapBox SDK for android。请帮我。非常感谢。 我在 Google Service Map Android
我建立了一个新的 react-native 项目并使用 yarn add @react-native-mapbox-gl/maps 添加了 Mapbox。 这个 Notice, that if you
我建立了一个新的 react-native 项目并使用 yarn add @react-native-mapbox-gl/maps 添加了 Mapbox。 这个 Notice, that if you
是否可以获取对应于 Mapbox 缩放级别的仪表列表?就像下面从 Bing map 中列出的一样:here 最佳答案 是的,就在 Mapbox 文档中: https://docs.mapbox.com
由于 Mapbox GL 文档没有讨论任何关于向 LngLat 坐标添加简单标记的内容,而且实际上只有关于如何添加自定义标记的文档,我希望有人能告诉我您应该如何获取 Mapbox-gl.js实际上为传
我有一个图层将 geojson 源中的点要素渲染为圆圈。以下是其中一项功能的示例: { type: 'Feature', properties: { color: 'red',
如何使用嵌套值以使用 case == 运算符?就像是: this.map.setPaintProperty("somelayer", "fill-color", ["case",
我正在使用 mapbox.js 制作带有地点的 map 。我只是想让 map 返回点击的正确坐标,我使用以下代码成功管理: map.on('click', function(e) { var
我在 style.load 事件上重绘图层并移除图层 map.on('style.load', function() { loadByBounds(tempBou
我正在努力实现更好的文本大小调整,相信通过插值,我也许能够将我当前的文本标签更新为更高效的格式。目前我们正在创建“静态文本”,本质上我们获得了特定缩放级别的理想文本大小,然后在每个缩放级别使用停止缩放
我是一名优秀的程序员,十分优秀!