uniapp 地图层级

uniapp 地图层级设置方法

在uniapp中使用地图组件时，可以通过scale属性控制地图的缩放层级。scale值范围通常为3-20，数值越大，地图显示越详细。

<map style="width: 100%; height: 300px;" :scale="14"></map>

动态调整地图层级

通过绑定数据可以实现动态调整地图层级，结合@regionchange事件监听地图变化：

<template>
  <map 
    :scale="currentScale" 
    @regionchange="handleRegionChange"
  ></map>
</template>

<script>
export default {
  data() {
    return {
      currentScale: 14
    }
  },
  methods: {
    handleRegionChange(e) {
      console.log('地图区域变化', e)
    }
  }
}
</script>

获取当前地图层级

使用uni.createMapContext获取地图上下文后，可通过getScale方法获取当前缩放级别：

const mapCtx = uni.createMapContext('myMap');
mapCtx.getScale({
  success(res) {
    console.log('当前缩放级别:', res.scale);
  }
});

编程式控制层级

通过地图上下文对象的includePoints或moveToLocation方法调整显示区域时，会自动计算合适的缩放层级：

mapCtx.includePoints({
  points: [{
    latitude: 39.908,
    longitude: 116.397
  }],
  padding: [20, 20, 20, 20]
});

注意事项

• 不同平台对scale值的支持范围可能略有差异
• 过高层级的缩放可能需要相应级别的地图数据支持
• 安卓平台部分机型对最小缩放级别有限制