vue中使用百度地图，显示空白

Question

文件bmap.js

export function MP(ak) {
  return new Promise(function(resolve, reject) {
    window.onload = function() {
        resolve(BMap)
    }
    if(!window.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);
    }
  })
}

在文件中引入：import { MP } from '@/assets/bmap'
调用：

MP('wAR8NqqVEPjFxZKmoD6tpMns6wv3ze9T').then(BMap => {
    const map = new BMap.Map("bmap");
    console.log(map)
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
})

但是页面为空白，无报错，显示加载了百度地图API文件

Answer 1

有可能你传入的dom参数并没有被库获取到，你可以给你渲染地图的元素绑定一个ref,假设定义为bmap,然后将

const map = new BMap.Map(param)

构造函数里的参数param换成this.$refs.bmap,对了，这个步骤应该在mounted钩子函数中完成。

Answer 2

你地图渲染到哪儿了的?有没有给高度?

Answer 3

html代码

<div id="container" style="width:300px; height:300px;border:1px solid red;"></div>

vue代码

mounted() {
    console.error('每次加载--', Date.now());
    setTimeout(() => {
      this.MP('NmfCIrNZD29GgyaKXBR5awpIm15XVAGP').then((BMap) => {
        console.error('回调', BMap);
        const map = new BMap.Map('container');
        console.log(map);
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
      });
    });
  },
  methods: {
    MP(ak) {
      return new Promise(((resolve, reject) => {
        if (!window.BMap) {
          const 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);
          console.error('window.BMap', window.BMap);
          setTimeout(() => {
            resolve(window.BMap);
          }, 1000); // 这里延迟1秒是关键，要不显示不出来
        }
      }));
    },
}

太感谢楼上的大神提醒了，有不懂的可以微信我号yizheng369