百度地图Api（防踩坑记录）

（做一个认真仔细的人）

陆陆续续连轴转着忙着两个项目。今天终于有空写写随笔了，话不多说，开始。

当初用到百度地图api的时候遇到了很多问题（1. 刷新页面地图消失。2. Bmap is undefined。）

这样的方式可以百度地图api引入的解决一系列问题

百度地图官网介绍，仅提供2种方法的引入

　　1. script引入方式

　　2. 异步加载方式

创建一个js文件，写入以下代码进行异步加载方式，然后在需要用到的组件里直接引入就可以，以下有步骤方法。(使用异步加载方式就不需要再indx.html里面再引入了)

export function MP() {
  // console.log("初始化百度地图脚本...");
  const AK = "Ak秘钥";
  const BMap_URL = "https://api.map.baidu.com/api?v=2.0&ak="+ AK +"&s=1&callback=onBMapCallback";
  return new Promise((resolve, reject) => {
  // 如果已加载直接返回
    if(typeof BMap !== "undefined") {
    resolve(BMap);
    return true;
    }
    // 百度地图异步加载回调处理
    window.onBMapCallback = function () {
    console.log("百度地图脚本初始化成功...");
    resolve(BMap);
    };
    // 插入script脚本
    let scriptNode = document.createElement("script");
    scriptNode.setAttribute("type", "text/javascript");
    scriptNode.setAttribute("src", BMap_URL);
    document.body.appendChild(scriptNode);
  });
}

 在需要使用的vue组件中引入

import { MP } from "../assets/map";

HTML

<div id="map" style="width: 100%; height: 477px">div>

methods函数

InfoMap(){

 MP().then(() => {
  //创建map实例
  const map = new BMap.Map("map"))    
 }

}

这样就完美的解决了百度map引入的一系列问题了