Vue-baidu-map 动态刷新地图的方法

前言

• vue-baidu-map 是没有官方的刷新方法的，如果要在某个功能上实现刷新地图，我们可以使用v-if加开关思想加上侦听器，侦听这个标注数组来控制开关刷新

• 比如我们是在地图上动态标注点位，点位是v-for，当便利的数组有数据就可以刷新地图，就可以实现标注。

• 刚开始我是直接调用<baidu-map>的handler （）方法，也可以实现标注，但是会因为没有实例对象报错。

• 我的实际情况是点标注，在后续获取到故障信息的点位信息后，在地图给他按钮动态标注出来。

• 在网上查找了很多办法，也没有详细的解决方案，困扰了很久，在这里总结一下

具体实现

1.地图添加一个v-if 开关控制加载 点标注是v-for points数组

 <baidu-map
          v-if="hackReset"
          :center="center"
          :zoom="zoom"
          @ready="handler"
          class="baidu-map"
        >
          <!-- 标注 -->
          <div v-for="(item, k) in points" :key="k">
            <bm-marker
              :position="{ lng: item.lng, lat: item.lat }"
              :icon="{ url: item.txt, size: { width: 28, height: 30 } }"
              :title="item.title"
              @mouseover="infoWindowOpen(k)"
              @mouseout="infoWindowClose(k)"
            >
              <bm-info-window
                title="设备信息"
                :position="{ lng: item.lng, lat: item.lat }"
                :show="item.show"
              >
                <p v-text="item.poinser"></p>
                {{ item.poinser }}
              </bm-info-window>
            </bm-marker>
          </div>
        </baidu-map>

1. data 写一个hackReset变量控制地图开关默认开

 // 百度地图刷新开关
 hackReset: true,

1. points数组数据格式

this.points = [
        {
          lng: 119.27976095105356,
          lat: 26.11161188133426,
          show: false,
          txt: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAkdJREFUWEftlb1rFFEUxX83uyhYa/APsJBY+BEICIEomGZZNI02aQRxdSasYqPlGhtLwSFvVmwskkYLPxpLDWgjotgIEkFLIWgvYq7M29klO7M7bzKzIQiZbt7Hveedc++5wg5/ssP52QUwkAG9yqntkEbavE7GTQFQn9tAazsAAItibPzeN7QGLAtCS0JOlwGjHq8QVpOJuzH/DwBWFmUmRm0k5EnutVEwoE0m+MN4BKBbSLnXCgNocpS/rKJclJBnRepAPeYQHlFhRgI+DYqRaUTq4wOXxXC8EACfj8BDMZhh951OqD4vgA+ARgpsCpT8H5TjhBjOZoHPA+AQMJ9Ink1IVLBiTWdFDF9LAYguq8d5hCPDejmZwPY+2G5xSedkwALouCNbApBhPrmccPMh64pj9lWLrhfF+y0x+SZtLgZiGc4gTOcEsOzS3mnFKV3jCZmcaBE7qbUG+9nLuAR8dgHOxYB6NBjjJnuYknv86gZVn7soExJyrk8yh/ttvQYiQxHuyBJPe8mjV1ZZRzksIV9663G9jLQG1OMnyqS0+Z5MxAbT0ubtAGA1CXk5Ggl8loE1Mf1doAs8YIODKQk6bTtPlZrcZ628EXVmQl0MtYTWkwjvqXAsOWzU5wZQo0JdAn4XngW2BTN0zTIp64hVbknAu3IAfB4j/JAlrvUx0GAfVd4Az5PyxA76DZjN8gRnG8ZUnhTDhZQ3+FwCrohhKrW3wCzKdTHUS9dAVgBtckAC1l3VXkqCosHz3HNKkCdImTO7AP4B4VzbIYTL744AAAAASUVORK5CYII=',
          title: '烟感一',
          poinser: '位于2楼会议室烟感报警了'
        },
        {
          lng: 119.2801137156272,
          lat: 26.109890462480518,
          show: false,
          txt:                            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAcZJREFUWEftlzFIHEEUhr93ghYSEcFCsRFCitNCDCZgZVp7rxO0i7sIWmgliGClhYFw43VKqhBrCyttBEHs1MLK6iyENEcKBe/JjrPeHkLcvdtDi53mlgfzv2/+/80uJ7zxkjfuTx2ALtDHPSso+ZaACZe0sy4/uAn16wG+M0GOw5Y0D0WrfJMSRxlAHAfWqNasaiqWHBPAqtWIG4GY+gFtBkCjs5UBxHWAKoNS4roZ68O9DUWAcIBykgYAMAZMJhrClBq/lIkdgbAsRTYDBfWZRvkF7ImhYGvz5HlgP3IqG5d6/AGmotdNfZZQNpI5oBRkmz0rWrtGRgz+c7Ye58GzGIYjtSLg0caQ/OTS7p9jCrFg8d8DwC3Khd0kjAJdCP+ocupqA8BH1/gC5dY+5xhD6QSuUTfEwhDQmxSgjHLlmo0A3UAF5czVAsFAOFhnKBVX/wx8AK5Qyq72CehPCuCLwbhcx4FjYFcMs69EsAPMAF/EPLmlHh4QRJMogihAIBgIPwOoz1eU3w6mEGn2BBCZ9kYBwoOm+xv7GqbbtqaWAWQOZA5kDvzXgUV6uGMXtR+T9JdQoYMZ2eJvKP6+/pymf+TXFR8B10ADMBO6FewAAAAASUVORK5CYII=',
          title: '烟感二',
          poinser: '位于2楼会议室烟感报警了'
        }
      ]

4.利用侦听器，侦听标注数组points变化，调接口有数据就是有需要标注信息，就控制地图开关刷新

 watch: {
    points: {
      handler(newValue, oldValue) {
        console.log('百度地图更新了')
        this.hackReset = false
        //遮罩层开关 可有可不有
        this.loadinge = false
        this.$nextTick(() => {
          this.hackReset = true
        })
      }
    }
  },

注意：这里有一个遮罩层开关，是默认开，地图加载完毕就关掉了。因为地图加载有白屏现象，用户体验不好，所以有一个遮罩层。主页文章有。我们通过按钮点击调接口，查询标注点数组数据，利用侦听器侦听数组，有数据就是需要标注。

---

总结：

经过这一趟流程下来相信你也对 ue-baidu-map 动态刷新地图的方法 有了初步的深刻印象，但在实际开发中我们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕