6***@qq.com
6***@qq.com
  • 发布:2021-03-19 11:43
  • 更新:2021-05-27 14:31
  • 阅读:543

【报Bug】MAP 组件,APP上,使用了聚合后,market 事件点击无效

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

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

HBuilderX类型: Alpha

HBuilderX版本号: 3.1.6

手机系统: Android

手机系统版本号: Android 11

手机厂商: 华为

手机机型: P30 pro

页面类型: nvue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template> <view > <map id="amap" ref="map" :style="'width: ' + width + '; height: ' + height + ';'" longitude="mapInfo.longitude" :latitude="mapInfo.latitude" scale="mapInfo.scale" show-compass max-scale="mapInfo.maxScale" markers="marketsList" @callouttap="callouttap"
@markertap="markertap"
></map>
</view>
</template>

<script>
let map;
import { getMarketList,getMapMarketList } from "../../common/js/Api.js";
import storage from '@/common/js/storage.js'
var MARKER_INFO={height:40,width:30}
// #ifdef APP-NVUE
const currentWebview = plus.webview.currentWebview();
// #endif
export default {
data(){
return {
search :{
pn: 0,
rn: 12,
},
marketsList:[],
height:'',
width:'',
mapInfo:{
scale:16,
maxScale:17,
longitude:'116.397428',
latitude:'39.90923'
},
callout:{
content:'',
fontSize:'13',
color:'red',
textAlign:'center',
bgColor:'white',
padding:3,
display:'ALWAYS',
borderRadius:10
}
}
},
onLoad() {
map = uni.createMapContext('map', this);
uni.getSystemInfo({
success: res => {
console.log(res)
this.height =( res.windowHeight) + 'px';
this.width = res.windowWidth + 'px';
}
});

    this.initFn();  
    },  
    created() {  
          // 监听当前窗口显示  
        currentWebview.addEventListener('show',e=>{  
            console.log('indexShow');  
            this.initFn();  
        })  
    },  
    beforeDestroy() {  
        // 移除监听事件  
        currentWebview.removeEventListener('show',e=>{})  
    },  
    methods:{  
        initFn(){  
            this.getData();  
            this.getSelfLocation();  
        },  
        goDetail(address_id) {  
            uni.navigateTo({  
                url: "/pages/index/pages/view?address_id=" + address_id,  
            });  
        },  
        markertap(e){  
            console.log('markertapmarkertapmarkertap',e)  
            this.goDetail(this.marketsList[e.detail.markerId].address_id);  

        },  
        callouttap(e){  
            console.log('this.marketsList[e.detail.markerId].address_id',this.marketsList[e.detail.markerId].address_id)  
            this.goDetail(this.marketsList[e.detail.markerId].address_id);  

            console.log('eeeeeee',e)  
        },  
        getSelfLocation(){  
            console.log('地址获取');  
            uni.getLocation({  
                type: 'gcj02',  
                success: res => {  

                    console.log('地址获取成功,切换到目标点nvue', res);  
                    this.mapInfo.latitude=res.latitude;  
                    this.mapInfo.longitude=res.longitude;  

                    // this.getList(res.latitude,res.longitude);  
                },  
                fail: () => {  
                    uni.showToast({  
                        title:'地理位置获取失败'  
                    })  
                }  
            });  
        },  
        formatJson(list){  
            var arr=[]  
            list.forEach((e,index)=>{  
                let callout=Object.assign(this.callout,{content:e.market_name})  
                console.log(e,index)  
                if(!e.real_position){  
                    return  
                }  
                var item={  
                    'latitude': Number(e.real_position.lat)  ,  
                    'longitude': Number(e.real_position.lng) ,  
                    'iconPath':"/static/ITkoala-amap/item.png",  
                    id:index*1,  
                    address_id:e.address_id,  
                    width:MARKER_INFO.width,  
                    height:MARKER_INFO.height,  
                    //  ,  
                    callout:{...callout},  
                    }  
                arr.push(item)  
                console.log('item.id',item.id)  
            })  
            return arr;  
        },  
        getData(params = {}) {  
            uni.showLoading({  
                title: "数据获取中...",  
            });  
            const user_info = storage.get('user_info') || {}  

            getMapMarketList({  
                uid:user_info.uid,  
                flag:1,  
            }).then((res) => {  
                        console.log(res)  
                        this.marketsList= this.formatJson(res.online_market);  
                        uni.hideLoading();  
                    },  
                    (reject) => {  
                        uni.hideLoading();  
                    })  

    }  
    }  
}  

</script>

<style>
</style>

操作步骤:

1.注释掉 joinCluster:true ,地图能正常触发 2.打开joinCluster:true,地图无法触发点击事件

预期结果:

预期:无论joinCluster:true 还是false,都应该正常触发事件啊

实际结果:

无法触发,事件无用

bug描述:

在 map中 生成markets的时候,加入了joinCluster 属性,并且 设置成true, 此时地图callouttap,和markertap 均不会触发。 如果把joinCluster:false, callouttap,和markertap 事件正常触发。。

2021-03-19 11:43 负责人:无 分享
已邀请:
DCloud_Android_ST

DCloud_Android_ST

聚合还没有开发 暂时不要使用joinCluster

  • 6***@qq.com (作者)

    哦哦就是看到这个效果挺好的,但是使用了 其他事件冲突了

    2021-03-19 15:15

虹机

虹机

点聚合什么时候能上啊,大家都等太久了

该问题目前已经被锁定, 无法添加新回复