是否可以为 react-native-maps 使用自己的“左”“右”“上”“下”按钮？答案

【问题标题】：Is it possible to use own "left" "right" "up" "down" buttons for react-native-maps?是否可以为 react-native-maps 使用自己的“左”“右”“上”“下”按钮？
【发布时间】：2019-10-31 21:07:12
【问题描述】：

我将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... />

【问题讨论】：

有人知道吗？或者也许-> 是否可以使用按钮进行滑动而不是使用手指进行滑动？谢谢简
是的，您可以使用按钮。只需在按下相关按钮后将数字添加到经度或纬度。但我想问题与 setInterval 相同。

标签： react-native react-native-maps

【解决方案1】：

您可以使用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}
      .../>

现在指定计算出的 latitude 和 longitude 以移动到特定的一侧（左、右、上、下按钮的功能）。

    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 prop 和animateToRegion 方法执行相同的操作，您可以在其中指定纬度和经度。（但是，我认为使用区域时没有任何旋转道具）

您可以在文档中找到更多信息：https://github.com/react-native-community/react-native-maps/blob/master/docs/mapview.md

【讨论】：