vue 引入js_Vue-cli3/4中使用AMap、BMap

首先 国内三大地图服务商 高德地图（AMap）腾讯地图(qqmap) 百度地图(BMap)

其中AMap 和 qqmap 使用的坐标系为 GCJ02 火星坐标系

BMap使用的坐标系为 BD09 百度坐标系，BD09是在GCJ02二次加密的基础上诞生的

下面进入正题

---

AMap

第一步

在public/index.html中引入amap的script，注意在key=后面填写自己申请的key（高德地图开放平台）

第二步

在vue.config.js中加入配置代码 如下图

第三步

在你需要使用AMap的vue文件中import引入， 如下图

至此使用成功

（ps: vue.config.js做出改动后不会热启动，需要重新npm run dev/serve）

BMap

引入方式同AMap ,

第一步 在public/index.html中引入bmap的script，注意在ak=后面填写自己申请的ak（百度地图开放平台）

第二步

在vue.config.js中加入配置代码 如下图 (添加BMapLib是因为使用了百度的LuShu)

如使用webpack2 需要在webpack.base.config.js中配置 externals: {"BMap": "BMap" }

第三步

在你需要使用BMap的vue文件中import引入， 如下图

至此完成

拓展 在BMap中使用聚合点功能

首先来看官网doc，找到聚合点demo 如下图

如图所示 使用聚合点需要额外引入两个JS，那么如何在vue cli中使用呢 ？下面介绍使用方法（亲测）

第一步 需要在你的index.html中引入这两个JS

第二步 需要在你的webpack.base.config.js / vue.config.js中配置如下

externals: {
    "BMap": "BMap",
    "BMapLib": "BMapLib"
  },

第三步 需要在你的业务页面中import引入

然后在你的代码中根据业务逻辑和官方文档创建使用即可

至此完成

由此可见 在vue cli中使用拓展 需要现在index.html中引入 然后配置相应的externals 最后在页面中引入即可， 当然也可以使用github上相关的插件 比如 vue-amap等