【百度地图二 - vue-baidu-map】bm-marker和bm-info-window实现打点和点详情弹窗功能
1. 问题如图:经纬度值已经改变,但是每次点击当前的坐标弹窗永远是在最后一个位置。在bm-marker中使用v-for循环,但是bm-info-window只会创建一个,点击其他的窗体位置还是在最后一个2. 解决方法:给bm-marker最外层套一个div,v-for循环绑定在div上,然后关键在于,被循环数组的每一个元素中应当有一个单独的flag,用来控制每个marker窗体的显示与与隐...
·
1. 效果图
2. 实现代码:
2.1 template
<bm-marker v-for="marker of markers" :position="{lng: marker.lng, lat: marker.lat}" @click="lookDetail(marker)">
<bm-info-window :title="infoWindow.info.name" :position="{lng: infoWindow.info.lng, lat: infoWindow.info.lat}" :show="marker.showFlag" @close="infoWindowClose(marker)" @open="infoWindowOpen(marker)">
</bm-info-window>
</bm-marker>
2.2 data
markers: [
{
lng: 87.52801179885864,
lat: 44.15955126285553,
name:'测试矛盾111',
showFlag:false //flag放在每一条数据里
},
{
lng: 82.56253054272383,
lat: 42.63299560546875,
name:'',
showFlag:false
}
],
infoWindow.info:{},
2.3 method
// 点击点坐标赋值
lookDetail(marker){
marker.showFlag = true;
this.infoWindow.info = marker;
},
// 关闭弹窗
infoWindowClose(marker) {
marker.showFlag = false
},
// 打开弹窗
infoWindowOpen(marker) {
marker.showFlag = true
},
3. 使用 <bm-label>
点位置添加标注
<bm-marker>
<bm-label
content="1"
:labelStyle="{color: '#fff', fontSize : '12px',background:'rgba(0, 0, 0, 0)',borderColor:'rgba(0, 0, 0, 0)'}"
:offset="{width: 4,height:2 }"
/>
</bm-marker>
4. 更改点图标:添加icon
即可
<bm-marker
v-for="marker of markers"
:key="item.code"
:position="{lng: marker.lng, lat: marker.lat}"
@click="lookDetail(marker)"
:icon="{url: 'https://csdnimg.cn/pubfooter/images/gongan.png', size: {width: 32, height: 32}}"
>
更多推荐
已为社区贡献58条内容
所有评论(0)