在vue项目中使用百度地图

1.首先在新建的vue项目中build文件夹下的webpack.base.conf.js文件中进行如下配置。

module.exports = {

  context: path.resolve(__dirname, '../'),

  entry: {

    app: './src/main.js'

  },

  externals: {

    "BMap": "BMap"

  },

2.配置完成后在 http://lbsyun.baidu.com/apiconsole/key申请密钥（ak)，如果是前端开发者记得应用类型一定要选择浏览器端。

3.在vue项目下的index.html中添加

如图所示：

index.png

其中的getscript也可以写成api，如果使用api会发现控制台有警告信息，如图所示：

error.png

错误原因是：页面渲染完成后使用了document.write()。

4.在使用到地图的页面引入BMap，在monuted函数中进行地图初始化等一系列的地图操作，切记只有dom加载完毕后地图才能初始化。完整页面代码如下所示：

5.最后使用npm install下载包，再重新启动项目，就可以使用百度地图了。