【解决】简单有效的解决百度地图多个标记点多个信息窗口只显示一个问题(vue-baidu-map)
【解决】简单有效的解决百度地图多个标记点多个信息窗口只显示一个问题(vue-baidu-map)vue + vue-baidu-map<!-- 百度地图 --><baidu-mapclass="map":center="markerPoint1":zoom="9":scroll-wheel-zoom="true"><bm-navigation anchor="BMAP
·
【解决】简单有效的解决百度地图多个标记点多个信息窗口只显示一个问题(vue-baidu-map)
vue + vue-baidu-map
<!-- 百度地图 -->
<baidu-map
class="map"
:center="markerPoint1"
:zoom="9"
:scroll-wheel-zoom="true"
>
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
<!-- 遍历多个点坐标 -->
<template v-for="(items, index) in str">
<bm-marker
:key="index"
:position="items.markerPoint"
@click="look(items)"
>
</bm-marker>
</template>
<!-- 信息窗体 -->
<bm-info-window
:position="position"
:show="show"
@close="infoWindowClose"
@open="infoWindowOpen"
>
<p>{{from.xianghao}}</p>
<p>{{from.adds}}</p>
<p>{{from.time}}</p>
<el-button type="text">详情</el-button>
</bm-info-window>
</baidu-map>
data() {
return {
position: {},
show: false,
from:{},
markerPoint1: { lng: 118.52, lat: 31.67 },
str: [
{
markerPoint: { lng: 118.52, lat: 31.67 },
xianghao: "BADWQI32221",
adds: "差分状态:N",
time: "上报时间:2020/11/01 13:48",
},
{
markerPoint: { lng: 113.52, lat: 31.67 },
xianghao: "ABCD873873",
adds: "差分状态:Y",
time: "上报时间:2020/11/23 13:48",
},
{
markerPoint: { lng: 116.404, lat: 39.915 },
xianghao: "EERQSIA21",
adds: "差分状态:N",
time: "上报时间:2018/11/23 11:48",
},
],
methods:{
infoWindowClose() {
this.show = false;
},
infoWindowOpen() {
this.show = true;
},
look(items) {
console.log(items)
this.from = items
this.position = items.markerPoint;
this.show = true;
},
},
}
这是无意中看到别的的csdn上的内容,感觉好用所以分享给各位,如有不当的地方请大家指出。
更多推荐
已为社区贡献1条内容
所有评论(0)