【解決】簡單有效的解決百度地圖多個標記點多個資訊視窗只顯示一個問題(vue-baidu-map)
阿新 • • 發佈:2020-12-09
【解決】簡單有效的解決百度地圖多個標記點多個資訊視窗只顯示一個問題(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上的內容,感覺好用所以分享給各位,如有不當的地方請大家指出。