在vue项目中怎么调用Bmap

在vue项目里面引入百度地图api有两种方式，一个是官方文档提供

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>

然后在webpack里面需要配置externals选项，设置外部扩展

externals: {
    'BaiduMap': 'BMap'
}

在使用的时候，组件里面需要引入

import BaiduMap from 'BaiduMap'

mounted() {
  var map = new BaiduMap.Map(xxx)
}

另一种是用vue-baidu-map
官方文档
具体引用查看文档

在这里说一个很重要的问题，就是使用vue-baidu-map的话，很多方法没有办法使用，这个时候需要引入外部文件或者库
比如，我们需要引入GeoUtils，方法参考上面第一种方法
index.html

<script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>

webpack.base.conf.js

externals:{
    'BMapLib': 'BMapLib'
  }

组件引用

import BMapLib from 'BMapLib'

但是这里面我们很多时候需要用一个BMap，怎么办呢？
vue-baidu-map文档有一处说明

由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。
使用方法：

<template>
  <baidu-map :center="center" :zoom="zoom" @ready="handler"></baidu-map>
</template>
<script>
export default {
  data () {
    return {
      BMap: null
    }
  },
  methods: {
    handler ({BMap, map}) {
      this.BMap = Bmap
    }
  }
}
</script>

这样我们就可以在methods方法里面使用Bmap了，this.BMap.Point(xxx, xxx)、this.BMap.Polygon(xxx)