【问题标题】: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,这是标记应在地图上显示/隐藏的近似缩放级别的整数。

有没有办法基于RegionlatitudeDeltalongitudeDelta 来获得当前缩放级别的近似双倍/整数,就像我们在谷歌地图(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>
    

    【讨论】:

      猜你喜欢
      • 2018-04-02
      • 2023-03-26
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2010-11-30
      • 2012-11-09
      • 1970-01-01
      • 2020-07-30
      相关资源
      最近更新 更多