Vue2 ：百度地图bmap

百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。

该套API免费对外开放。自v1.5版本起，您需先申请密钥（ak）才可使用，接口无使用次数限制。

地址传送门：http://lbsyun.baidu.com/index.php?title=jspopular

申请密钥

点击此处申请密钥，然后在首页index.html的head引入下面的js代码：

注意：
建议先写个简单的html确认密钥正确可用后，再讲其引入vue的项目中。因为有些教程这里引入的js的src末尾带有 &callback=init ，这个参数导致了报错（见下图），而始终无法正常使用百度地图api。

vue-map-01.png

webpack 配置文件

如果只是第一步，你调用百度地图api时，报错： Bmap is not defined ，那么就配置 webpack 配置文件（webpack.base.conf.js）的module.exports中加个externals：

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: { app: './src/main.js' },
  //百度地图配置20180518
  externals: {
    "BMap": "BMap"
  },
...
}

调用

另一种方式：异步加载

跟百度api官网里的异步加载很像。首先跟入口 js（main.js）一样，新建一个 map.js 。（ak 就是你的密钥）

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

在页面中调用：

import {MP} from '@/map.js'  
export default {
    data () {
      return {
        ak:'', // 这里就是百度地图密钥
      }
    },
    mounted(){
      this.$nextTick(function() {
        var _this = this;
        MP(_this.ak).then(BMap => {
          // 百度地图API功能
          ...
        })
      })
    },
}

注意：
说到 src 末尾的 callback 参数，是否需要，值又是什么（ init, initialize ），自己去试验，随便写个简单的html，调试通了再引入vue。

小提示：

• 使用BMap的时候不需要import了，import反而会报错：BMap is not defined
• 注意一定要给bmap的div设置高度，否则会看不见

参考

• 前端框架Vue（9）——百度地图使用
• vue调用百度地图api时Bmap没有定义的解决办法