将 Region latitudeDelta / longitudeDelta 转换为近似的 zoomLevel答案

【问题标题】：Convert a Region latitudeDelta / longitudeDelta into an approximate zoomLevel将 Region latitudeDelta / longitudeDelta 转换为近似的 zoomLevel
【发布时间】：2017-10-04 15:18:49
【问题描述】：

我在 react-native 应用程序上使用来自 Airbnb 的出色 react-native-maps。

我在 JSON 文件中获得了一个标记列表，其中每个标记都有一个属性 zoom，这是标记应在地图上显示/隐藏的近似缩放级别的整数。

有没有办法基于Region 的latitudeDelta 和longitudeDelta 来获得当前缩放级别的近似双倍/整数，就像我们在谷歌地图（1 到 20）上所做的那样？

谢谢

【问题讨论】：

标签： react-native react-native-maps

【解决方案1】：

好的，我有一个方便的解决方案，我不知道我们是否可以做得更好。

我添加了onRegionChange 事件来检索区域，然后我使用了一些数学：

<MapView
    style={styles.map}
    initialRegion={this.state.region}
    onRegionChange={region => {
        clearTimeout(this.timerForMap)
        this.timerForMap = setTimeout(() => {
            this.showMarkers(region)
        }, 100)
    }}>
    ...

然后：

showMarkers(region) {
    let zoom = Math.round(Math.log(360 / region.longitudeDelta) / Math.LN2)
    ...
}

如果有人有更好的方法，请随时发表评论！

谢谢。

【讨论】：

这也是我获得缩放级别的方式。
您可以使用它来计算给定缩放的区域const distanceDelta = Math.exp(Math.log(360) - (zoom * Math.LN2));
我们在哪里使用这个缩放变量

【解决方案2】：

您可以使用 MapView 中的 onRegionChange 从 getCamera() 获取缩放级别

const [zoom, setZoom] = useState(''); //initiates variable zoom

const getZoom = async () => {
  const coords = await mapRef.getCamera();
  setZoom(coords.center.zoom); // sets variable zoom the value under coords.center.zoom
}

<MapView>
ref = {(ref) => mapRef = ref}
 onRegionChange = {() => {getZoom();}}
</MapView>

【讨论】：