问题

问题建立的前提是：引用了vue-baidu-map插件，且需要进行解析坐标地名

项目中遇到了一个需求，后台给了一组json对象，每个子对象中有个坐标，而需要前端进行解析坐标的当前的位置名称，而我的项目中使用到vue-baidu-map ，后面在初始化的时候一直没能取到BMap ，报错 BMap is not defind 和 BMap.point is not a constructor 。

原因

地图组件初始化未完成，就执行了BMap相关方法

解决方式

首先需要在组件中添加地图，且需要给地图组件添加一个ready函数监听地图加载完成

	   =<!-- 地图存在时，BMap才会有效 -->
        <div v-show="false">
            <baidu-map @ready="handler"></baidu-map>
        </div>

监听事件

        // 监听地图加载完成
        handler({ BMap }) {
            // console.log(BMap, map);
            this.tools.analysisAddress(
                [
                    { lng: 116.307852, lat: 40.057031 },
                    { lng: 116.307852, lat: 40.057031 }
                ],
                res => {
                    console.log(res);
                }
            );
        }

解析地址事件

/*
  * @title 解析百度地图坐标地址
  * @params arr array 坐标参数 不能为空
  * @params callBack function 回调返回解析值
  * @return searchGeo callback 递归计算
  */
 analysisAddress: (arr, callBack) => {
   // 判断传入的arr是否为数组
   if (!Array.isArray(arr) || arr.length === 0) {
     // eslint-disable-next-line no-throw-literal
     throw "arr not a Array or arr not is null Array!";
   }

   // eslint-disable-next-line no-undef
   var Geo = new BMap.Geocoder();
   var adds = arr;
   var addressList = [];
   let i = 0;

   // 逐个逆向解析
   async function searchGeo() {
     // 传入的坐标必须是数字
     if (isNaN(adds[i].lng) || isNaN(adds[i].lat)) {
       // eslint-disable-next-line no-throw-literal
       throw "adds[i].lng or adds[i].lat is not a number!";
     }

     // eslint-disable-next-line no-undef
     let point = new BMap.Point(adds[i].lng, adds[i].lat);
     await Geo.getLocation(point, rs => {
       var addComp = rs.addressComponents;
       addressList.push(
         addComp.province +
           " " +
           addComp.city +
           " " +
           addComp.district +
           " " +
           addComp.street +
           " " +
           addComp.streetNumber
       );
       if (i < arr.length - 1) {
         i++;
         return searchGeo();
       } else {
         callBack(addressList);
       }
     });
   }
   return searchGeo();
 }

效果 队列显示返回值