解決vue中BMap未定義問題

原文鏈接： 點我

最近在項目中使用了百度地圖來顯示物流信息，實現方式有兩種：

引用Vue Baidu Map
引用BMap
存在的問題：\color{red}{存在的問題：}存在的問題：；
使用BMap可以修改起始點和終點的圖標，但是地圖需要刷新頁面才會顯示。
針對以上問題，問題的實現如下所示：

Vue文件中的代碼

<template>
	<div id="myMap"></div>
</template>
import qs from "qs";
export default {
  mounted() {
    this.getMap();
  },
  methods: {
    // 繪制地圖
    getMap() {
      var map = new BMap.Map("myMap");
      map.enableScrollWheelZoom(true);
	 //注意：下面的坐標值換為自己的動態值即可，我就不多說了
      var start = new BMap.Point(this.startLng, this.startLat);
      var end = new BMap.Point(this.currentLng, this.currentLat);
      var p1 = new BMap.Point(this.currentLng, this.currentLat);
      //自定義圖標
      var startIcon = new BMap.Icon(
        require("../../assets/images/point.png"),  //起點圖片
        new BMap.Size(25, 25)
      );
      var currentIcon = new BMap.Icon(
        require("../../assets/images/car.png"),   //物流車圖片
        new BMap.Size(25, 25)
      );
      var endIcon = new BMap.Icon(
        require("../../assets/images/point.png"),   //終點圖片
        new BMap.Size(25, 25)
      );
      var driving = new BMap.DrivingRoute(map, {
        renderOptions: { map: map, autoViewport: true },
        onMarkersSet: function(routes) {
          //標注點完成回調
          map.clearOverlays(); //刪除點
          var myStart = new BMap.Marker(start, { icon: startIcon });
          map.addOverlay(myStart);
          var myEnd = new BMap.Marker(end, { icon: endIcon });
          map.addOverlay(myEnd);
          var myP1 = new BMap.Marker(p1, { icon: currentIcon });
          map.addOverlay(myP1);
        }
      });
      driving.search(start, end, { waypoints: [p1] });
    },
};
</script>

　　

• 這樣寫之后瀏覽器會報BMap is undefined,解決方法如下：

• 在項目根目錄下建立Js文件（比如：map.js）

  export function MP(ak) {  
  return new Promise(function (resolve, reject) {
    window.onload = function () {
      resolve(BMap)  
    }  
    var script = document.createElement("script");
    script.type = "text/javascript";  
    script.src = "http://api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init";
    script.onerror = reject;  
    document.head.appendChild(script);  
  })  
  } 
  

  在App.vue中

• <script>
  import { MP } from './map'    //引入上面創建的map.js文件
  export default {
    name: 'app',
    data(){
      return {
        ak: "這里是您的密鑰",
      }
    },
    async mounted(){
        await MP(this.ak);
    }
  }
  </script>
  

  　　要使用的vue文件中

• mounted() {
  // 解決BMap undefined
  this.$nextTick(() => {
    var timer = setTimeout(() => {
      this.getMap();
    }, 500);
  });
  },
  

  好啦，通過上面的代碼刷新顯示地圖就解決啦，若大家有更好的方法歡迎分享在下面👇👇👇，期待中…