vue-baidu-map插件中bm-marker组件嵌套bm-info-window组件使用
在bm-marker中使用v-for循环,但是bm-info-window只会创建一个,网上也没有找到解决办法,思考了一阵子终于解决了
解决方法:
给bm-marker最外层套一个div,v-for循环绑定在div上,然后关键在于,被循环数组的每一个元素中应当有一个单独的flag,用来控制每个marker窗体的显示与与隐藏
直接上代码:
template:
<div v-for="marker of markers">
<bm-marker :position="{lng: marker.lng, lat: marker.lat}" :title="marker.name" @click="infoWindowOpen(marker)">
<bm-info-window title="车辆信息" :position="{lng: marker.lng, lat: marker.lat}" :show="marker.showFlag" @close="infoWindowClose(marker)" @open="infoWindowOpen(marker)">
</bm-info-window>
</bm-marker>
</div>
data:
markers: [
{
lng: 116.405,
lat: 39.901,
showFlag:false //flag放在每一条数据里
},
{
lng: 116.404,
lat: 39.900,
showFlag:false
}
]
method:
infoWindowClose(marker) {
marker.showFlag = false
},
infoWindowOpen(marker) {
marker.showFlag = true
},