uni-app程序中设置map组件的scale属性不生效

uni-app程序中设置map组件的scale属性不生效

操作步骤：

  • 代码如上

预期结果：

  • 设置map的scale属性后，地图会缩放到指定的scale

实际结果：

  • 实际上并没有缩放

bug描述：

代码基本结构如下，调用this.setScale()方法设置缩放等级，实际没有改变，调用mapContext.getScale()返回的结果也是没变。

<template>  
  <map id="map1" ref="map1" :scale="initScale" :show-location="showLocation" :show-compass="true"  
    :style="{height: mapHeight + 'px', width: '100vw'}"  
  />  
</template>  

<script>  
export default {  
  data() {  
    return {  
      initScale: 16,  
      showLocation: true  
    };  
  },  
  computed: {  
    mapHeight() {  
      const height = 500; // 设置地图高度  
      return height;  
    }  
  },  
  methods: {  
    setScale(scale) {  
      // 设置缩放等级  
      this.initScale = scale;  
    }  
  }  
}  
</script>
信息类别 详细信息
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 Catalina 10.15.5
HBuilderX类型 正式
HBuilderX版本号 3.1.18
第三方开发者工具版本号 1.05.2105170
基础库版本号 2.17.0
项目创建方式 HBuilderX

更多关于uni-app程序中设置map组件的scale属性不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

重新测试了一下，scale属性绑定变量的新值必须跟当前值不一样才会生效。比如以上代码中initScale被设置为20，用户手工缩放地图后，重新设置initScale为20是不生效的，必须设置为其它值（如20.01）。

更多关于uni-app程序中设置map组件的scale属性不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，map组件的scale属性需要通过mapContext对象的方法来动态修改，直接修改data中的绑定值不会触发地图缩放。

修改方案：

  1. 使用uni.createMapContext获取地图上下文
  2. 调用mapContext.setScale()方法设置缩放级别

修正后的代码示例：

methods: {
  setScale(scale) {
    // 通过mapContext设置缩放
    const mapContext = uni.createMapContext('map1', this);
    mapContext.setScale({
      scale: scale,
      success: () => {
        console.log('缩放设置成功');
      },
      fail: (err) => {
        console.log('缩放设置失败', err);
      }
    });
  }
}
回到顶部