react-native - 是否可以为 react-native-maps 使用自己的“左”“右”“上”“下”按钮?
问题描述
我正在使用react-native-maps
forreact-native
并且我喜欢使用自己的“左”“右”“上”和“下”按钮,而不是用手指滑动。(也是一个旋转按钮)
我在网上搜索了很多,但我找不到解决方案。
我可以使用 setInterval 并在经度或纬度上添加一个数字,但这/是/非常数据密集型、缓慢且不那么平滑。
<MapView style={{ flex: 1 }}
initialRegion={this.state.region}
followUserLocation={false}
showsUserLocation={false}
zoomEnabled={false}
zoomControlEnabled={false}
zoomTapEnabled={false}
rotateEnabled={false}
scrollEnabled={false}
></MapView>
<Button title="up" onPress... />
<Button title="down" onPress.../>
<Button title="left" onPress... />
<Button title="right onPress... />
<Button title="rotate-left" onPress... />
<Button title="rotate-right" onPress... />
解决方案
您可以使用camera view
而不是region
指定纬度和经度。它提供了一种导航到特定坐标并旋转地图的方法。
首先为地图的初始位置创建状态:
this.state = {
camera: {
center: {
latitude: 40.712776,
longitude: -74.005974,
},
pitch: 0,
heading: 0,
zoom: 15
}
}
然后将它与 MapView 一起使用,如下所示:
<MapView
ref={(ref) => this.mapView = ref}
camera={this.state.camera}
.../>
现在指定计算的纬度和经度以移动到特定的一侧(左,右,上和下按钮的功能)。
MoveToPosition = () => {
const duration = 1000;
//provided static latitude and longitude for moving downwards from original location
var newCam = {
center: {
latitude: 40.702776,
longitude: -74.005974,
}
}
//below method animates view to specified latitude and longitude in provided duration
this.mapView.animateCamera(newCam, duration);
}
要旋转heading
地图,您可以在道具中指定数字度数。
RotateFun = () => {
heading += 90;
this.mapView.animateCamera({ heading: heading }, 1000);
}
您可以使用可以指定纬度和经度的region
道具和animateToRegion
方法来执行相同的操作。(但是,我认为使用区域时没有任何旋转道具)
您可以在文档中找到更多信息:https ://github.com/react-native-community/react-native-maps/blob/master/docs/mapview.md
推荐阅读
- vb.net - 在 RichTextBox 中获取实际的 SelectionStart 位置?
- node.js - 节点 - 将表与 Sequelize 关联
- arrays - 标记包含过滤器列表中单词的单元格
- json - 将两个相同文件的json文件合二为一
- java - 如何在 Android 10 中创建自定义目录“/storage/emulated/0/TestDir”?
- html - 如何通过自定义 CSS 更改阿拉伯语 RTL 下拉子菜单的方向?
- deployment - 管理代理产品上的就绪探测失败
- python - 如果我有中点、角度和长度,则获取一条线的端点
- mongodb - 猫鼬集成问题(又名 insertMany)
- swiftui - 似乎无法在 text() 和 textfield() 之间使用 Spacer()