在 Vue 项目中使用百度地图 API 接口

Question

直接在 Vue 项目里面调用百度地图 API 是不成功的，不知道是不是我代码写的有问题，不过通过下面的方法肯定能很优雅的使用百度地图。

申请百度地图密钥

JavaScript API v1.4 以及以前的版本无序申请秘钥（ak），自 v1.5 版本开始需要先申请秘钥（ak），才可以使用，如需获取更高的配额，需要申请认证企业用户。百度地图API 链接地址：http://lbsyun.baidu.com/apiconsole/key

添加百度地图 JavaScript API 接口

<script src="http://api.map.baidu.com/api?v=1.4"></script>
//v1.4版本以及以前版本
<script src="http://api.map.baidu.com/api?v=2.0&ak=您的秘钥"></script>
//1.5版本，需要秘钥

配置 webpack.base.conf.js 文件

在 webpack.base.conf.js 配置文件中配置BMap，在 module.exports 中与 entry 平级，如果还有其他的，同样在下面引入就可以了，比如自定义覆盖物 BMap_Symbol_SHAPE_POINT 等。配置完成以后需要重新 npm run dev 才可以正常运行。

module.exports = {
  entry: {
    app: './src/main.js'
  },
  externals: {
    'BMap': 'BMap',
    'BMap_Symbol_SHAPE_POINT': 'BMap_Symbol_SHAPE_POINT'
  },

编写 HTML 代码

在组件中创建一个容器，用来显示百度地图（宽高最好都是100%）

<div class="baidumap" id="allmap">
</div>

引入 BMap 实例

在地图组件中 import BMap，否则会出现 BMap undefined，还有这个 BMap_Symbol_SHAPE_POINT，因为是用 _ 连字符，会报错让你这个没有用驼峰命名。所以引入时，把这个连字符去掉就行了。

import BMap from 'BMap
import BMapSymbolSHAPEPOINT from 'BMap_Symbol_SHAPE_POINT'

创建地图对象

创建地图对象，在 mounted 生命周期调用

mounted () {
  this.baiduMap()
},
methods: {
  baiduMap () {
    var map = new BMap.Map('allmap')
    var point = new BMap.Point(111.742579, 40.818675)
    map.centerAndZoom(point, 12)
    var marker = new BMap.Marker(point)
    map.addOverlay(marker)
  }
}

基本就这样使用了，百度地图里面有一些方法是异步的，所以在编写代码的时候要考虑到延迟或者回调函数中执行。