如何在 react-native-map 中放大/缩小？

Question

我正在使用 react-native 来构建地图应用程序。我正在使用的 api 来自此链接： https ://github.com/lelandrichardson/react-native-maps。

以下是我将地图带到我的应用程序的代码。我想知道如何在该地图上给出缩放值。以及当用户单击地图上的按钮时如何更改缩放值。

我应该使用什么缩放 API 来实现这一点？

 import React, { Component, StyleSheet, View, TextInput } from "react-native";
import MapView from "react-native-maps";

class MapPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      region: {
        latitude: 4.21048,
        longitude: 101.97577,
        latitudeDelta: 10,
        longitudeDelta: 5,
      },
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <TextInput style={styles.inputText}>Map</TextInput>
        <MapView
          style={styles.map}
          mapType={"standard"}
          region={this.state.region}
          zoomEnabled={true}
          scrollEnabled={true}
          showsScale={true}
        />
      </View>
    );
  }
}

module.exports = MapPage;

const styles = StyleSheet.create({
  map: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  container: {
    flexDirection: "row",
    justifyContent: "space-between",
    padding: 30,
    flex: 1,
    alignItems: "center",
  },
  inputText: {
    height: 36,
    padding: 4,
    marginRight: 5,
    flex: 4,
    fontSize: 18,
    borderWidth: 1,
    borderColor: "#48BBEC",
    borderRadius: 8,
    color: "#48BBEC",
  },
});

原文由 Joey Yi Zhao 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你应该使用 animateToRegion 方法（见 这里）

它需要一个具有 latitudeDelta 和 longitudeDelta 的区域对象。使用这些设置缩放级别。

更新：

in a Region object the latitude and longitude specify the center location and latitudeDelta and longitudeDelta specify the span of可视地图区域。

此 博客文章中的这张图片很好地说明了这一点（LatΔ 和 LngΔ）。

原文由 David 发布，翻译遵循 CC BY-SA 4.0 许可协议