百度地图调用问题解决方案

发表于 更新于 分类于

百度地图调用问题解决方案

背景

做地图可视化，我们经常使用百度地图，如果是纯js,在html 中调用，一般没什么问题，可以很好的融合，但是放在node.js(vue/angularjs/react)中经常会出现

1
Bmap is not defined

问题原因

产生上面的问题是因为百度地图api 会异步加载，在该js 还未加载完毕，即调用，即会产生该问题。这个问题发现许多人遇到，但是网上的回答特别少，有几个有帮助的也是提供思路，基本都是异步加载再调用。也就是等资源加载完毕再调用。

解决方案

新建map.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
export function MP() {
  return new Promise(function (resolve, reject) {
    // 如果已加载直接返回
    if(typeof BMap !== 'undefined') {
      resolve(BMap);
      return true;
    }
    // 百度地图异步加载回调处理
    window.onBMapCallback = function () {
      console.log('百度地图脚本初始化成功...');
      resolve(BMap);
    };
    const script = document.createElement('script');
    script.type = 'text/javascript';
    //script.src = 'http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM';
    script.src = 'http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM&s=1&callback=onBMapCallback';
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

使用

1
2
3
4
5
6
7
import { MP } from './map.js';

MP().then(BMap => {
     //调用
    }).catch(error =>{
      console.log('error');
    });

相关项目

  • Bmap kibana 插件，开发该项目遇到这个问题