bm-marker组件循环打印后bm-info-window组件无法多次打开,解决方法是在为每一个数据设置单独的flag去控制显示,在循环时把当前数据的位置传入函数
html:
<bm-marker
v-for="(pos,pos_index) in positions"
:key='pos_index'
@click="infoWindowOpen(pos_index)"
:position='{lng:pos.lng,lat:pos.lat}'
:icon="{url:positions[pos_index].alert?alert_url:icon_url, size: {width: 30, height: 30}}" >
<bm-info-window :show="pos.isShow" @close="infoWindowClose(pos_index)">
<div>
设备数量:{{pos.total_dev}}
</div>
<hr>
<div v-if="pos.alert" style="color:red">
{{pos.alert_num}}台设备异常
</div>
<div v-else style="color:green">
所有设备运行正常
</div>
</bm-info-window>
</bm-marker>data:positions:[
{lng: 15.532, lat: 49.813, isShow:false,alert:true,alert_num:1,total_dev:6},
{lng: 14.344, lat: 49.231, isShow:false,alert:false,alert_num:null,total_dev:10}
],methods:
infoWindowOpen(pos){
this.positions[pos].isShow=true
},
infoWindowClose(pos){
this.positions[pos].isShow=false
},文档中给的bm-info-window中添加infoWindowOpen事件那个我试了下加不加没什么影响,具体原因没时间看了,但是能用