解决vue中BMap未定义问题

最近在项目中使用了百度地图来显示物流信息，实现方式有两种：

• 引用Vue Baidu Map
• 引用BMap

$\color{red}{存在的问题：}$
1、使用Vue Baidu Map不需要刷新页面即可显示地图，但是不知道如何修改起始点和终点的图标；
2、使用BMap可以修改起始点和终点的图标，但是地图需要刷新页面才会显示。
针对以上两个问题，问题1还未找到解决方案，大家如果有好的解决方案欢迎分享在下面哦。问题2的实现如下所示：

• 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);
  });
  },
  

• 效果图
  
  好啦，通过上面的代码刷新显示地图就解决啦，若大家有更好的方法欢迎分享在下面???，期待中…