uni-app MAP 组件在APP上使用聚合后 market 事件点击无效

uni-app MAP 组件在APP上使用聚合后 market 事件点击无效

产品分类：

uniapp/App

PC开发环境操作系统：

Mac

HBuilderX类型：

Alpha

HBuilderX版本号：

3.1.6

手机系统：

Android

手机系统版本号：

Android 11

手机厂商：

华为

手机机型：

P30 pro

页面类型：

nvue

打包方式：

云端

示例代码：

<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;  
        },  
        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>