3***@qq.com
3***@qq.com
  • 发布:2021-10-09 17:09
  • 更新:2021-12-15 15:27
  • 阅读:528

【报Bug】nvue map marks 添加点聚合后, addMarkers的 clear: true 无效

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win 10

HBuilderX类型: 正式

HBuilderX版本号: 3.2.9

手机系统: Android

手机系统版本号: Android 11

手机厂商: 小米

手机机型: 小米9

页面类型: nvue

nvue编译模式: 纯nvue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
    <view>  
        <map id="mapId" ref="mapId" class="map" :longitude="longitude" :latitude="latitude" @markertap="markertap" @tap="tapMap"></map>  

        <view class="btn-area service">  
            <button @click="removeMarkers">移除参与聚合点的marker</button>  
            <button @click="addMarkers">添加聚合点marker</button>  
        </view>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
             latitude: 23.099994,  
             longitude: 113.324520,  
        }  
    },  
    onLoad() {  
        this.mapCtx = uni.createMapContext('mapId', this);  

         this.mapCtx.on('markerClusterClick', res=> {  
          console.log('markerClusterClick', res)  
         })  

        this.bindEvent()  
    },  
    methods: {  

     bindEvent() {  

    // 聚合点进行初始化配置  
    this.mapCtx.initMarkerCluster({  
      enableDefaultStyle: false,  
      zoomOnClick: true,  
      gridSize: 60,  
      complete(res) {  
        console.log('initMarkerCluster', res)  
      }  
    })  

    // enableDefaultStyle 为 true 时不会触发改事件  
    this.mapCtx.on('markerClusterCreate', res => {  
      console.log('clusterCreate', res)  
      const clusters = res.clusters  

      const markers = clusters.map(cluster => {  
        const {  
          center,  
          clusterId,  
          markerIds  
        } = cluster  

        return  {  
          ...center,  
          width: 0,  
          height: 0,  
          clusterId, // 必须  
          label: {  
            content: markerIds.length + '',  
            fontSize: 20,  
            width: 60,  
            height: 60,  
            bgColor: '#00ff00',  
            borderRadius: 30,  
            textAlign: 'center',  
            anchorX: 0,  
            anchorY: -30,  
          }  
        }  
      })  
      this.mapCtx.addMarkers({  
        markers,  
        clear: false,  
        complete(res) {  
          console.log('clusterCreate addMarkers', res)  
        }  
      })  
    })  

  },  

  addMarkers() {  
      const marker = {  
        id: 1,  
        iconPath: '/static/images/ico_map_zd_s.png',  
        width: 50,  
        height: 50,  
        joinCluster: true, // 指定了该参数才会参与聚合  
        label:{  
          width: 50,  
          height: 30,  
          borderWidth: 1,  
          borderRadius: 10,  
          bgColor: '#ffffff'  
        }  
      }  

      const positions = [  
        {  
          latitude: 23.099994,  
          longitude: 113.324520,  
        }, {  
          latitude: 23.099994,  
          longitude: 113.322520,  
        }, {  
          latitude: 23.099994,  
          longitude: 113.326520,  
        }, {  
          latitude: 23.096994,  
          longitude: 113.329520,  
        }  
      ]  
      const markers = []  

      positions.forEach((p, i) => {  
        const newMarker = Object.assign(marker, p)  
        newMarker.id = i + 1  
        newMarker.label.content = `label ${i + 1}`  
        markers.push(newMarker)  

        this.mapCtx.addMarkers({  
          markers,  
          clear: false,  
          complete(res) {  
            console.log('addMarkers', res)  
          }  
        })  
      })  
    },  

     removeMarkers() {  
        this.mapCtx.addMarkers({  
          clear: true,  
          markers: []  
        })  
      },  

      onMarkerTap(e) {  
          console.log('@@ markertap', e)  
        },  

        onCalloutTap(e) {  
          console.log('@@ onCalloutTap', e)  
        },  

        onLabelTap(e) {  
          console.log('@@ labletap', e)  
        }  

    }  
}  
</script>  

<style>  
.map {  
    width: 750rpx;  
    height: 300px;  
}  

.btn-area {  
    margin: 10px;  
    display: flex;  
    flex-wrap: wrap;  
    border: 1px solid #ccc;  
}  

button {  
    display: inline-block;  
    margin: 10px 5px;  
}  
</style>  

操作步骤:

点击添加聚合效果后 marks 清除无效

预期结果:

应该所有 marks 清空

实际结果:

点击添加聚合效果后 marks 清除无效

bug描述:

Android端 nvue Map中markers 添加了点聚合后

 addMarkers() {  
      const marker = {  
        id: 1,  
        iconPath: '/static/images/ico_map_zd_s.png',  
        width: 50,  
        height: 50,  
        joinCluster: true, // 指定了该参数才会参与聚合  
        label:{  
          width: 50,  
          height: 30,  
          borderWidth: 1,  
          borderRadius: 10,  
          bgColor: '#ffffff'  
        }  
      }  

      const positions = [  
        {  
          latitude: 23.099994,  
          longitude: 113.324520,  
        }, {  
          latitude: 23.099994,  
          longitude: 113.322520,  
        }, {  
          latitude: 23.099994,  
          longitude: 113.326520,  
        }, {  
          latitude: 23.096994,  
          longitude: 113.329520,  
        }  
      ]  
      const markers = []  

      positions.forEach((p, i) => {  
        const newMarker = Object.assign(marker, p)  
        newMarker.id = i + 1  
        newMarker.label.content = `label ${i + 1}`  
        markers.push(newMarker)  

        this.mapCtx.addMarkers({  
          markers,  
          clear: false,  
          complete(res) {  
            console.log('addMarkers', res)  
          }  
        })  
      })  
    },  

     removeMarkers() {  
        this.mapCtx.addMarkers({  
          clear: true,  
          markers: []  
        })  
      },  

无效,无法清除 点聚合数据 ,

2021-10-09 17:09 负责人:DCloud_Android_ST 分享
已邀请:
DCloud_Android_ST

DCloud_Android_ST

问题已确认 预计下个版本修复

y***@outlook.com

y***@outlook.com

有结果吗

3***@qq.com

3***@qq.com

官方 什么时候解决呀 ... 坐等

DCloud_Android_ST

DCloud_Android_ST

HX3.3.1alpha 已修复

要回复问题请先登录注册