VUE中百度地图插件的tabs栏切换后地图缩小

问题描述：

正常的tabs栏切换正常显示

再次切换回来的时候或者多次切换后，地图会变小，只有一个是正常显示

代码：

<template>
  <div class="map-container">
    <van-tabs v-model="active" color="#6d97f7" sticky>
      <van-tab title="公共公交">
        <!-- 检索输入 -->
        <!-- <van-row>
      <van-col span="12">
        <label>关键词：<input v-model="keyword"></label>
      </van-col>
      <van-col span="12">
        <label>地区：<input v-model="location"></label>
      </van-col>
    </van-row> -->
        <baidu-map :center="location" @ready="handler" :zoom="zoom" :dragging="true" :scroll-wheel-zoom="true">
          <!-- 挂载点 -->
          <bm-view :center="location" style="width: 100%; height:300px; flex: 1"></bm-view>
          <!-- 比例尺 -->
          <!-- <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale> -->
          <!-- 缩放 -->
          <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
          <!-- 地图类型 -->
          <!-- <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type> -->
          <!-- 定位 -->
          <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="false" :autoLocation="true" @locationSuccess="getLoctionSuccess"></bm-geolocation>
          <!-- 点 -->
          <!-- <bm-marker :position="center" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"> -->
          <!-- <bm-label content="" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}" /> -->
          <!-- </bm-marker> -->
          <!-- 检索 -->
          <!-- <bm-local-search class="search" :keyword="keyword" :auto-viewport="true" :location="location"></bm-local-search> -->
          <!-- 公共公交 -->
          <bm-transit class="bm-transit" :start="startPoint" :end="endPoint" :location="location" :autoViewport="true"></bm-transit>
        </baidu-map>
      </van-tab>
      <van-tab title="步行">
        <!-- 检索输入 -->
        <!-- <van-row>
      <van-col span="12">
        <label>关键词：<input v-model="keyword"></label>
      </van-col>
      <van-col span="12">
        <label>地区：<input v-model="location"></label>
      </van-col>
    </van-row> -->
        <baidu-map :center="location" @ready="handler" :zoom="zoom" :dragging="true" :scroll-wheel-zoom="true">
          <!-- 挂载点 -->
          <bm-view :center="location" style="width: 100%; height:300px; flex: 1"></bm-view>
          <!-- 比例尺 -->
          <!-- <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale> -->
          <!-- 缩放 -->
          <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
          <!-- 地图类型 -->
          <!-- <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type> -->
          <!-- 定位 -->
          <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="false" :autoLocation="true" @locationSuccess="getLoctionSuccess"></bm-geolocation>
          <!-- 点 -->
          <!-- <bm-marker :position="center" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"> -->
          <!-- <bm-label content="" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}" /> -->
          <!-- </bm-marker> -->
          <!-- 检索 -->
          <!-- <bm-local-search class="search" :keyword="keyword" :auto-viewport="true" :location="location"></bm-local-search> -->
          <!-- 步行 -->
          <bm-walking class="bm-walking" :start="startPoint" :end="endPoint" :location="location" :autoViewport="true"></bm-walking>
        </baidu-map>
      </van-tab>
      <van-tab title="驾车">
        <!-- 检索输入 -->
        <!-- <van-row>
      <van-col span="12">
        <label>关键词：<input v-model="keyword"></label>
      </van-col>
      <van-col span="12">
        <label>地区：<input v-model="location"></label>
      </van-col>
    </van-row> -->
        <baidu-map :center="location" @ready="handler" :zoom="zoom" :dragging="true" :scroll-wheel-zoom="true">
          <!-- 挂载点 -->
          <bm-view :center="location" style="width: 100%; height:300px; flex: 1"></bm-view>
          <!-- 比例尺 -->
          <!-- <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale> -->
          <!-- 缩放 -->
          <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
          <!-- 地图类型 -->
          <!-- <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type> -->
          <!-- 定位 -->
          <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="false" :autoLocation="true" @locationSuccess="getLoctionSuccess"></bm-geolocation>
          <!-- 点 -->
          <!-- <bm-marker :position="center" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"> -->
          <!-- <bm-label content="" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}" /> -->
          <!-- </bm-marker> -->
          <!-- 检索 -->
          <!-- <bm-local-search class="search" :keyword="keyword" :auto-viewport="true" :location="location"></bm-local-search> -->
          <!-- 驾车 -->
          <bm-driving class="bm-driving" :start="startPoint" :end="endPoint" :autoViewport="true" :location="location"></bm-driving>
        </baidu-map>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0, //tab栏起始页
      zoom: 10, //地图缩放比例
      location: '深圳', //检索的地区
      keyword: '百度', //检索的关键字
      center: { lng: 114.05, lat: 22.55 }, //中心坐标
      // autoLocationPoint: { lng: 0, lat: 0 },
      initLocation: false,
      startPoint: {}, //起点坐标
      endPoint: { lng: 114.029113, lat: 22.609725 } //终点坐标
    }
  },
  onLoad() {
    console.log('onLoad')
  },
  methods: {
    /* 
     地图组件渲染完毕时触发，返回一个百度地图的核心类和地图实例
     百度地图组件是异步加载，请不要尝试在组件的生命周期中访问 BMap 核心类和 map 实例，
     如有需要，请在所需组件的 ready 事件回调函数的参数中获取
     参数：{BMap, map}
    */
    handler({ BMap, map }) {
      // 设置一个临时变量指向vue实例，因为在百度地图回调里使用this，指向的不是vue实例
      let _this = this
      console.log('BMap:', BMap, 'map:', map)
      // 实现一进页面自动定位
      var geolocation = new BMap.Geolocation()
      geolocation.getCurrentPosition(
        function (r) {
          console.log('定位信息:', r)
          _this.startPoint = { lng: r.longitude, lat: r.latitude } // 设置center属性值
          _this.initLocation = true
          console.log('定位坐标lng:', _this.startPoint.lng, '\n', '定位坐标lat:', _this.startPoint.lat) // 如果这里直接使用this是不行的
        },
        { enableHighAccuracy: true }
      )
    },
    getLoctionSuccess({ point, AddressComponent, marker }) {
      console.log('手动定位坐标：', point)
      this.center = { lng: point.lng, lat: point.lat }
      console.log(this.center)
    }
  }
}
</script>

<style scoped>
.bm-transit,
.bm-walking,
.bm-driving {
  width: 100%;
  height: 600px;
  overflow: auto;
}
</style>

解决：

把 var geolocation = new BMap.Geolocation()方法注释之后，正常显示

解决方案：不需要每个地图组件都去监听ready回调，只需监听一次，获取到定位坐标即可，

因此留下第一个ready回调，把其他的删除就没问题了