百度地圖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引入的一系列問題了