多个百度地图,数据更新之后页面不更新的解决方案

161 阅读1分钟
  1. 地图添加一个v-if 开关控制加载
<template
  <div class="app-container">
        <baidu-map
          v-if="hackReset"
          class="map-view"
          :center="center"
          :zoom="12"
          @ready="handlerhistory"
          style="height: 800px"
        >

          <div v-if="points.length > 1">
            <bm-label
              :content="points[0].name"
              :position="{ lng: points[0].lng, lat: points[0].lat }"
              :labelStyle="style"
              :offset="{ width: -15, height: -15 }"
              title="测试"
            />
            <bm-label
              :content="points[points.length - 1].name"
              :position="{
                lng: points[points.length - 1].lng,
                lat: points[points.length - 1].lat,
              }"
              :labelStyle="style"
              :offset="{ width: -15, height: -15 }"
              title="测试"
            />
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
            <bm-polyline
              :path="points"
              stroke-color="#F25C05"
              :stroke-opacity="0.7"
              :stroke-weight="5"
            ></bm-polyline>
          </div>
        </baidu-map>
      </div>
     <template>
     
  1. data 写一个hackReset变量控制地图开关默认开
hackReset: true,
  1. 利用侦听器,侦听标注数组points变化,调接口有数据就是有需要标注信息,就控制地图开关刷新
watch: {
    points: {
      handler(newValue, oldValue) {
        // console.log('百度地图更新了')
        this.hackReset = false
        this.$nextTick(() => {
          this.hackReset = true
        })
      }
    }
  },