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 = falseif (flag) {this.basicFormValidate.businessAddressDetail = data.addressthis.basicFormValidate.businessAddressLatitude = data.latthis.basicFormValidate.businessAddressLongitude = data.lngthis.basicFormValidate.businessProvinceId = data.businessProvinceId}}

最后的结果就是这样的

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

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！