关于vue.js:使用vuebaidumap时找不到BMap对象报错BMap-is-not-defind

我的项目中须要用百度地图计算两个坐标点的间隔，在我的项目中引入 vue-baidu-map 后，组件中没有找不到 BMap 对象，一番寻找后。。。正确应用形式如下

1、在我的项目中引入 vue-baidu-map

main.js 中
import BaiduMap from 'vue-baidu-map'
   Vue.use(BaiduMap, {ak: '你的密钥'})

2、在组件中应用须要先加载地图组件才能够应用 BMap，不须要显示地图组件能够让他暗藏

<div v-show="false">
 <baidu-map @ready="onMapReady"/>
</div>

methods: {
    // 检测地图加载实现
       onMapReady({BMap, map}) {this.BMap = BMap;}，getDistance(p1, p2) {
            try {
                const _this = this;
                const BMap = this.BMap;
                const driving = new BMap.DrivingRoute(new BMap.Point(116.404, 39.915), {onSearchComplete: function (results) {_this.distance = Math.floor((results.taxiFare.distance)/1000)// 公里数
                }
                });
                driving.search(p1, p2);
            } catch (e) {console.warn(e, 'e')
            }
        },
      handleAddressChange() {
          const BMap = this.BMap;
          if(!BMap) return;
          const p1 = new BMap.Point(Longitude1, Latitude1);
          const p2 = new BMap.Point(Longitude2, Latitude2);
          this.getDistance(p1, p2)
      }
    }