技術標籤：vscodevue.js

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