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

【解决】简单有效的解决百度地图多个标记点多个信息窗口只显示一个问题(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上的内容，感觉好用所以分享给各位，如有不当的地方请大家指出。