vue element-ui web端 引入高德地图，并获取经纬度

发版前接到一个临时新需求 ，需要在web端地址选择时用地图，并获取经纬度。
临阵发版之际加需求，真的是很头疼，于是赶紧找度娘，找api。
我引入的是高德地图，首先要去申请key ， 和密钥，

首先用npm 安装loader

npm i @amap/amap-jsapi-loader --save

然后在main.js里引入

这里要注意，还需要在index.html文件里引入这一段，开始我没有引入这段，后面请求高德接口时就会报错

这里我写了一个组件，后面直接引用就可以
组件内容如下：

内容有点多，截不完图，下面附上源码：

然后在需要的文件里引入就可以：
当我点击这个输入框时，就会弹出地图组件

这个是地图组件：
引用组件的代码如下：

 
 
 import Amap from '@/views/common/Amap'
 components: { Amap }

    initMapConfirm() {
      this.amapVisible = true
    },
    mapConfirm(flag, data) {
      this.amapVisible = false
      if (flag) {
        this.basicFormValidate.businessAddressDetail = data.address
        this.basicFormValidate.businessAddressLatitude = data.lat
        this.basicFormValidate.businessAddressLongitude = data.lng
        this.basicFormValidate.businessProvinceId = data.businessProvinceId
      }
    }

最后的结果就是这样的

如果说之前有地址，那会代入并反向定位，获取其经纬度

好了就分享到这儿，备个份，助人达己。
如果说有更好的方便，欢迎交流分享。