uniapp 地图层级

地图层级设置方法

在UniApp中调整地图层级主要涉及<map>组件的scale属性。该属性用于控制地图的缩放级别，数值越大，地图显示范围越广（即层级越高）。

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

层级范围说明

• 有效范围：通常为3-20级（不同平台可能有差异）
• 低层级（如3-10）：显示大范围区域，细节较少
• 高层级（如16-20）：显示小范围区域，细节更丰富

动态调整层级

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

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

<script>
export default {
  data() {
    return {
      currentScale: 14
    }
  },
  methods: {
    handleRegionChange(e) {
      console.log('当前层级:', e.scale)
    }
  }
}
</script>

平台差异注意事项

• 微信小程序：scale值与腾讯地图一致，最高20级
• 百度地图：需注意坐标系差异，建议使用@getscale事件获取实时层级
• H5端：依赖浏览器实现，不同厂商可能有层级限制

常用场景配置

• 城市级显示：推荐11-14级
• 街道级显示：推荐15-18级
• 建筑物细节：需要19-20级（部分平台支持）

可通过官方文档查询最新参数： UniApp Map组件文档