1，同步整合百度地图

首先说明这种没整合聚合库。如果要整合聚合库看下篇文章
我的下篇文章
1，在需要引入地图的页面加上

 <div style="margin-top: 10px" id="baiduMap" class="full-height"></div>

2，引入百度地图，在public文件夹下面的，index.html

 <script type="text/javascript" id="external-script" src="http://api.map.baidu.com/api?v=4.0&ak=你的密钥">  </script>

然后直接new bmap

  let baiduMap = new BMap.Map("baiduMap", {
            // // JSAPI商用授权挂件默认开启，关闭需要修改调用JSAPI的代码
            // enableBizAuthLogo: false,
          });
            baiduMap.centerAndZoom(new BMap.Point(118.750801, 31.944156), 5)
          // 设置地图显示的城市 此项是必须设置的
          baiduMap.setCurrentCity('西宁')
          // 启用滚轮放大缩小，默认禁用
          baiduMap.enableScrollWheelZoom(true)
          // 启用地图惯性拖拽，默认禁用
          baiduMap.enableContinuousZoom(true)
          //地图背景
          baiduMap.setMapStyle({styleJson: state.styleJson});//地图背景
          // 添加比例尺控件
          let scaleCtrl = new BMap.ScaleControl();
          baiduMap.addControl(scaleCtrl);
          //导航控制
          let NavigationControl = new BMap.NavigationControl();
          baiduMap.addControl(NavigationControl);
          //地图模式

          baiduMap.addControl(new BMap.MapTypeControl({
            mapTypes: [
              // eslint-disable-next-line no-undef
              BMAP_NORMAL_MAP,
              // eslint-disable-next-line no-undef
              BMAP_HYBRID_MAP
            ]
          }))

第二种，异步加载百度地图

删去index.html的那句引用，新建msp.js

export default {
    init: function (AK) {

        // 百度地图API文件链接，异步加载必须带参数callback，后面是回调函数。
        const BMap_URL = "http://api.map.baidu.com/api?v=3.0&ak=" + AK + "&callback=onBMapCallback";
        return new Promise((resolve, reject) => {
            // 如果已加载直接返回
            if (typeof BMap !== "undefined") {
                // eslint-disable-next-line no-undef
                resolve(BMap);
                return true;
            }
            // 百度地图异步加载回调处理
            window.onBMapCallback = function () {
                // eslint-disable-next-line no-undef
                resolve(BMap);
            };

            // 插入script脚本
            let scriptNode = document.createElement("script");
            scriptNode.setAttribute("type", "text/javascript");
            scriptNode.setAttribute("src", BMap_URL);
            document.body.appendChild(scriptNode);

        });
    }
}

在需要引入百度地图的页面加上

<div style="margin-top: 10px" id="baiduMap" class="full-height"></div>

然后异步加载

//说明这里是我获取百度地图apikey的接口你可以换成你的接口。
   async init() {
        let otherApi = new OtherApi();
        let apikey = ref();
        await otherApi.getAPIkey().then(res => {
          apikey = res.msg;

        })
        BaiduMap.init(apikey).then((BMap) => {

          // 创建地图实例
          let baiduMap = new BMap.Map("baiduMap", {
            // // JSAPI商用授权挂件默认开启，关闭需要修改调用JSAPI的代码
            // enableBizAuthLogo: false,
          });

          // 初始化地图,设置中心点坐标和地图级别
          baiduMap.centerAndZoom(new BMap.Point(118.750801, 31.944156), 5)
          // 设置地图显示的城市 此项是必须设置的
          baiduMap.setCurrentCity('西宁')
          // 启用滚轮放大缩小，默认禁用
          baiduMap.enableScrollWheelZoom(true)
          // 启用地图惯性拖拽，默认禁用
          baiduMap.enableContinuousZoom(true)
          //地图背景
          baiduMap.setMapStyle({styleJson: state.styleJson});//地图背景
          // 添加比例尺控件
          let scaleCtrl = new BMap.ScaleControl();
          baiduMap.addControl(scaleCtrl);
          //导航控制
          let NavigationControl = new BMap.NavigationControl();
          baiduMap.addControl(NavigationControl);
          //地图模式

          baiduMap.addControl(new BMap.MapTypeControl({
            mapTypes: [
              // eslint-disable-next-line no-undef
              BMAP_NORMAL_MAP,
              // eslint-disable-next-line no-undef
              BMAP_HYBRID_MAP
            ]
          }))
    
        });
      },

谢谢大家！有什么不懂的可以留言