uni-app 动态设置map controls position 无效

uni-app 动态设置map controls position 无效

开发环境 版本号 项目创建方式
Windows 11 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.2.6

手机系统：Android

手机系统版本号：Android 9.0

手机厂商：小米

手机机型：mi6

页面类型：nvue

打包方式：云端

示例代码：

```js
let sysInfo = uni.getSystemInfoSync();  
windowHeight = sysInfo.windowHeight; // 屏幕的高度  
windowWidth = sysInfo.windowWidth; // 屏幕的宽度  

this.mapCtx = uni.createMapContext('map',this);  
let controls = this.controls  
controls[0].position.left= windowWidth - 50  
controls[1].position.left= windowWidth - 50  
this.controls = controls

操作步骤：

  • 根据屏幕宽度计算controls位置

预期结果：

  • 动态设置control位置

实际结果：

  • 无效

bug描述：

  • 动态设置map controls position 无效

更多关于uni-app 动态设置map controls position 无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 动态设置map controls position 无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 nvue 页面中动态设置 map 组件的 controls 位置，直接修改数组内对象的属性并重新赋值给 this.controls 是无效的。这是因为 uni-app 的 nvue 端对 map 组件的 controls 属性更新机制有特定要求。

原因分析： 在 nvue 中，map 组件的 controls 属性更新需要触发完整的列表重新渲染。直接修改数组元素的对象属性（如 controls[0].position.left）不会触发视图层的更新检测。

解决方案： 你需要创建一个全新的 controls 数组并重新赋值，确保触发数据变更检测。修改你的代码如下：

let sysInfo = uni.getSystemInfoSync();
let windowWidth = sysInfo.windowWidth;

this.mapCtx = uni.createMapContext('map', this);

// 创建新的 controls 数组，避免直接修改原数组元素
let newControls = this.controls.map(control => {
  // 返回新对象，确保引用改变
  return {
    ...control,
    position: {
      ...control.position,
      left: windowWidth - 50
    }
  };
});

// 重新赋值触发更新
this.controls = newControls;
回到顶部