您的位置:首页 > Web前端 > Vue.js

【解决】百度地图多个标记点多个信息窗口只显示一个问题(vue-baidu-map)

2020-06-07 04:33 162 查看

公司项目用到百度地图,我新手一个,碰到多个标记点多个信息窗口只显示一个问题。百度到的看不懂,后来自己解决了 ,贴出我的解决方法

vue + vue-baidu-map

HTML 代码

<template v-for="(items, index) in markerPoints">
<bm-marker
:key="index"
:position="items"
:icon="{ url: require('@/assets/img/point.svg'), size: { width: 32, height: 32 } }"
title="hello"
@click="lookDetail(items)"
>
</bm-marker>
</template>
<bm-info-window
:position="position"
:show="show"
@close="infoWindowClose"
@open="infoWindowOpen"
>
我爱北京天安门
</bm-info-window>

data代码

markerPoints: [
// 标记点列表
{ lng: 116.404, lat: 39.915 },
{ lng: 116.45, lat: 39.415 },
{ lng: 116.48, lat: 39.815 },
{ lng: 116.32, lat: 39.615 },
{ lng: 116.39, lat: 39.115 },
{ lng: 116.25, lat: 39.015 }
],
position: {},
show: false

js代码

infoWindowClose() {
this.show = false
},
infoWindowOpen() {
this.show = true
},
lookDetail(items) {
// console.log(items)
this.position = items
this.show = true
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐