vue-baidu-map插件中循环打印的bm-marker组件无法正常显示bm-info-window组件

1,714 阅读1分钟

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事件那个我试了下加不加没什么影响,具体原因没时间看了,但是能用