在app端 nvue页面，如何遍历markers才能显示自定义气泡窗口？
直接指定 marker-id="1" 可以对应的点显示自定义气泡，但是循环遍历就不行,这是什呢原因，
通过真机调试可以看到 slot="c1. allout"中 渲染出来的 节点上都有visibility="false" 是什么原因呢？？？
到底应该怎么写呢？
<template>
<view style="background-color: antiquewhite;width: 100%;" :style="{height:winHeight + 'px'}">
<map ref="map" id="map" :latitude="latitude" :longitude="longitude" :style="{height:winHeight + 'px'}"
scale='18' :circles="circles" :includePoints='includePoints' @regionchange="regionchange" :markers="markers" @callouttap='callouttap'
:polyline="polylineObj" @tap='tap'>
<cover-view slot="callout">
<!-- 循环遍历不显示 -->
<cover-view :marker-id="index" class="selfstyle" v-for="(item,index) in markers" :key="index">
<cover-image :src="'/static/ren.png'" style="width: 14px;height: 14px;"></cover-image>
<text class="font-sm text-danger">{{item.title}}</text>
</cover-view>
<!-- 直接指定marker-id 后页面上可以正常显示，循环遍历就不显示 -->
<cover-view :marker-id="1" class="selfstyle">
<cover-image :src="'/static/ren.png'" style="width: 14px;height: 14px;"></cover-image>
<text class="font-sm text-danger">1</text>
</cover-view>
</cover-view>
</map>
</view>
</template>
<script>
export default {
data() {
return {
winHeight: 0,
longitude: '',
latitude: '',
_mapContext: null, //地图对象
markers: [],
markerscat: [],
str: '',
includePoints: [],
circles: [],
polylineObj: [],
orgMarker: {
id: 1,
title: 'org',
longitude: 112.55371065112875,
latitude: 37.77265732468224,
customCallout: {
anchorY: 0,
anchorX: 0,
display: 'ALWAYS'
}
},
disMarker: {
id: 2,
title: 'dis',
longitude: 112.65371065112875,
latitude: 37.77265732468224,
customCallout: {
anchorY: 0,
anchorX: 0,
display: 'ALWAYS'
}
}
}
},
mounted() {
this.init();
},
onReady() {
this._mapContext = uni.createMapContext('map', this);
},
methods: {
callouttap(e){
uni.showToast({
title:JSON.stringify(e),
icon:"none",
duration: 5000
})
},
init() {
uni.getSystemInfo({
success: (e) => {
this.winHeight = e.windowHeight
}
})
let _this = this;
uni.showLoading({
title: '定位中'
})
uni.getLocation({
type: 'gcj02',
geocode: true,
// isHighAccuracy: true,
success: function(res) {
// 移动视野位置到当前人所在位置
_this._mapContext.moveToLocation({
longitude: res.longitude,
latitude: res.latitude
});
// 当前位置标记
_this.disMarker.longitude = res.longitude;
_this.disMarker.latitude = res.latitude;
let list = []
list.push(_this.orgMarker);
list.push(_this.disMarker);
// 标记点
_this.markers = list;
_this.markerscat = list;
console.log(_this.markerscat.length);
// 圆范围
_this.circles = [{
latitude: _this.orgMarker.latitude,
longitude: _this.orgMarker.longitude,
radius: 100,
strokeWidth: 0,
color: '#00000',
fillColor: '#a0a0a096'
}]
// 连线
_this.polylineObj = [{
points: [{
latitude: _this.disMarker.latitude,
longitude: _this.disMarker.longitude
},
{
latitude: _this.orgMarker.latitude,
longitude: _this.orgMarker.longitude
}
],
arrowLine: false, //配置项：带箭头的线
dottedLine: true,
color: '#000000',
width: 2, //配置项：线的宽度
}, ]
uni.hideLoading()
}
});
},
}
}
</script>
<style lang="scss">
.selfstyle {
display: flex;
justify-content: center;
align-items: center;
border: 1px;
width: 130rpx;
z-index: 999;
}
</style>
哈哈哈888
你好请问下，自定义的气泡会正常显示吗
2023-01-30 16:44
2***@qq.com
回复 哈哈哈888: 可以
2023-01-30 19:55
哈哈哈888
回复 2***@qq.com: 怎么解决的，求指教
2023-01-31 08:27
while
咋弄的耶，刷新key感觉没啥变化呢，nvue页面，我看id对应上的，但是不显示
2023-11-29 15:32