uni-app 微信小程序 真机苹果下 map markers标签，只要改变某个属性其他markers标签会全部消失

uni-app 微信小程序 真机苹果下 map markers标签，只要改变某个属性其他markers标签会全部消失 产品分类：

  • uniapp/小程序/微信

PC开发环境操作系统：

  • Windows

PC开发环境操作系统版本号：

  • Win10

HBuilderX类型：

  • 正式

HBuilderX版本号：

  • 3.2.3

第三方开发者工具版本号：

  • 1.05.2108130

基础库版本号：

  • 2.18.0

项目创建方式：

  • HBuilderX
开发环境 版本号 项目创建方式
Windows Win10 HBuilderX

示例代码：

//地图标签

    id="myMap"  
    ref="myMap"  
    show-location  
    scale="16"  
    :markers="markers"  
    :longitude="longitude"  
    :latitude="latitude"  
    :controls="controls"  
    @markertap="clickMarker"  
    :style="{ height: mapHeight, width: mapWidth }"

//标签赋值  
data() {  
    return {  
    longitude: '',  
    latitude: '',  
        markers: []  
    }  
}  

onShow: function() {  
    //后端加载附近资源资源(这边直接简写结果)  
    this.markers = [{  
        height: 25  
        iconPath: "https://xxx/park-addresss-icon.png"  
        id: 134.323437  
        latitude: 28.895885  
        longitude: 105.427552  
        width: 21  
    },{  
        height: 25  
        iconPath: "https://xxx/park-addresss-icon.png"  
        id: 134.324332  
        latitude: 28.897056  
        longitude: 105.427276  
        width: 21  
  } ... ];  
 // 大概有140个左右的标签  
}

//点击标签方法  
clickMarker(e) {  
  const markerId = e.detail.markerId;  
  for (let i = 0; i < this.markers.length; i++) {  
    let item = this.markers[i];  
    if(markerId === item.id) {  
      // 标签变大  
      this.$set(this.markers, i, Object.assign(item, {  
        width: 38,  
        height: 44  
      }));  
    }  
  }  
}

操作步骤：

上面描述


预期结果：


上面描述

实际结果：

上面描述


bug描述：


需求是点击某个标签选中变大  
问题是点击标签marker，点击的标签不消失，其他标签全消失了  
微信开发者工具上没有问题，在苹果真机上就会出现问题，测试过苹果8、xs均会  
Android机下不会存在问题，测试过华为荣耀小米  
是使用姿势不对吗  
各位大神帮忙看看是什么原因，小弟不胜感激，下面贴简化代码，真是代码太长太多

更多关于uni-app 微信小程序 真机苹果下 map markers标签，只要改变某个属性其他markers标签会全部消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

解决了，没点人品真解决不了。。。

更多关于uni-app 微信小程序 真机苹果下 map markers标签，只要改变某个属性其他markers标签会全部消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html


请问怎么解决的呢？遇到点击后都不显示了

markers里面的id不要有小数点，不要是字符串，一定要整数

这是一个已知的 uni-app 在 iOS 真机上处理 map 组件 markers 更新的性能优化问题。问题核心在于：iOS 微信小程序底层对 markers 数组的更新采用了差异化对比更新策略，但在某些情况下会错误地判断为需要清空其他 markers。

问题分析

  1. 根本原因：iOS 微信小程序在更新 markers 时，会对比新旧数组的引用和内容。当使用 this.$set 或直接修改数组元素时，如果新旧数组的 id 字段或其他关键属性发生变化，iOS 端可能会错误地认为需要重新渲染整个 markers 集合，导致未修改的 markers 消失。

  2. Android 正常的原因：Android 端的实现机制不同，对 markers 的更新处理更加宽松，不会出现此问题。

解决方案

方案一：使用全新的 markers 数组（推荐）

修改 clickMarker 方法，创建全新的 markers 数组：

clickMarker(e) {
  const markerId = e.detail.markerId;
  const newMarkers = this.markers.map(item => {
    if (markerId === item.id) {
      return {
        ...item,
        width: 38,
        height: 44
      };
    }
    return { ...item }; // 创建新对象，保持引用不同
  });
  this.markers = newMarkers;
}

方案二：使用深度拷贝确保引用不同

clickMarker(e) {
  const markerId = e.detail.markerId;
  const updatedMarkers = JSON.parse(JSON.stringify(this.markers));
  
  for (let i = 0; i < updatedMarkers.length; i++) {
    if (markerId === updatedMarkers[i].id) {
      updatedMarkers[i].width = 38;
      updatedMarkers[i].height = 44;
      break;
    }
  }
  
  this.markers = updatedMarkers;
}

方案三：使用 callout 替代 markers 尺寸变化

如果只是需要视觉上的选中效果，可以考虑使用 callout（标注）来显示选中状态，而不是改变 marker 的尺寸：

// 在 marker 数据中添加 callout
clickMarker(e) {
  const markerId = e.detail.markerId;
  const newMarkers = this.markers.map(item => {
    if (markerId === item.id) {
      return {
        ...item,
        callout: {
          content: '已选中',
          color: '#ffffff',
          bgColor: '#007AFF',
          padding: 5,
          borderRadius: 3,
          display: 'ALWAYS'
        }
      };
    }
    return {
      ...item,
      callout: null // 清空其他 callout
    };
  });
  this.markers = newMarkers;
}
回到顶部