BMap的使用填坑

BMap 百度地图API

 

在vue中的使用

1.先获取秘钥

2.在vue的index.html中引入http://api.map.baidu.com/api?v=2.0&ak=你的秘钥">

3.在webpack.base.conf.js文件内添加external选项，在module.exports内部，和entry平级；

externals: {

   'BMap':  'BMap'

},

4.添加地图组件BMapComponent.vue，这里主要注意两点：

    a）使用BMap的时候需要import

    b）注意一定要给bmap的div设置高度，否则会看不见

5.如果使用BMap之外的其他类，需要引入之后才可使用

例如：BMapLib

需要在index.html中引入之后

并在如同3的位置添加

externals: {

   'BMap': 'BMap',

   'BMapLib': 'BMapLib'

},

然后在模块中const BMapLib = require('BMapLib')

即可正常使用

还有一种使用第三方库：https://dafrok.github.io/vue-baidu-map/#/zh/start/usage