不用setTimeout直接赋值markers,结果是正常的:
使用setTimeout赋值markers,结果不正常,未显示自定义气泡:
出现问题的示例代码如下:
<template>
<view class="content">
<map id="map" :markers="covers" class="map" :show-location="true" :latitude="latitude" :longitude="longitude"
@callouttap="oncallouttap">
<cover-view slot="callout">
<template v-for="(item,index) in covers">
<cover-view :marker-id="item.id" :key="item.id" class="customCallout">
<cover-image class="icon" src="../../static/0.png"></cover-image>
<cover-view>
customCallout
</cover-view>
</cover-view>
</template>
</cover-view>
</map>
</view>
</template>
<script>
const img = '/static/logo.png';
export default {
data() {
return {
latitude: 39.9086920000,
longitude: 116.3974770000,
covers: []
}
},
onLoad() {
setTimeout(() => {
this.covers = [{
id: 1,
latitude: 39.9086920000,
longitude: 116.3974770000,
iconPath: '../../static/logo.png',
width: 40,
height: 40,
customCallout: {
display: "ALWAYS"
}
},
{
id: 2,
latitude: 39.9096920000,
longitude: 116.3984770000,
iconPath: '../../static/logo.png',
width: 40,
height: 40,
customCallout: {
display: "ALWAYS"
}
}
]
}, 1000)
},
methods: {
oncallouttap(e) {
uni.showModal({
content: JSON.stringify(e)
})
}
}
}
</script>
<style>
.content {
flex: 1;
}
.icon {
width: 20px;
height: 20px;
}
.map {
width: 750rpx;
height: 500px;
}
.customCallout {
background-color: #aaffff;
border: 1px solid #ff5500;
border-radius: 30px;
width: 200px;
height: 40px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.test {
width: 200px;
background-color: aliceblue;
}
</style>
_Nora_ (作者)
没有,我感觉是官方组件问题,也没人理
2022-10-13 15:49
哈哈哈888
回复 1***@qq.com: 解决了吗
2023-01-30 11:02