我正在使用 react-native-maps
为 react-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
用于指定纬度和经度。它提供了一种导航到特定坐标以及旋转 map 的方法。
首先为 map 的初始位置创建状态:
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
中指定度数的 map 支柱。RotateFun = () => {
heading += 90;
this.mapView.animateCamera({ heading: heading }, 1000);
}
您可以使用
region
执行相同操作 Prop 和animateToRegion
您可以指定纬度和经度的方法。(但是,我认为使用区域时没有任何旋转 Prop )您可以在文档中找到更多信息:https://github.com/react-native-community/react-native-maps/blob/master/docs/mapview.md
关于react-native - 是否可以将自己的 "left" "right" "up" "down"按钮用于 react-native-maps?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58651166/