uniapp 之 使用高德地图的方法将经纬度转为地址

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第9天，点击查看活动详情​

目录

前言

第一步

 第二步

第三步

---

前言

因项目上的需要，需定位显示自己的位置

​

 我之前一直坚持只使用 uniapp 内置的map属性去完成，却没成想，还是要依赖于高德地图才能将经纬度转为地址，之前也看过很多文章，最终实现了，给大家分享下

第一步

先去高德地图申请key

​

选微信小程序 

​

 最重要的一步就是点击相关下载 下载 amap文件 地址在上面的高德地图中

​

 第二步

下载成功后

​

 选择自己需要的，并把它放在项目中

第三步

前置工作做好了，那下面就是代码

 <map style="width: 100%; height: 400px;" :latitude="latitude" :longitude="longitude" scale="18"
          show-location="true">
 </map>


先引入 下载后的文件

 import amap from '../../components/amap-wx.130.js'


data 里 定义


 latitude: '',

 longitude: '',

  key: '7ae9ca9。。。。。', （前面申请的key）
        
  amapPlugin: null,

 onLoad() {
      this.amapPlugin = new amap.AMapWX({
        key: this.key
      });
      this.chooseSpot()
    },



methods里定义

 // 高德地图的方法，获取地址
      chooseSpot() {
        this.amapPlugin.getRegeo({
          success: (data) => {
            // console.log(data, '高德地图');
            this.latitude = data[0].latitude
            // console.log(this.latitude);
            this.longitude = data[0].longitude
            // console.log(this.longitude);
            this.city = data[0].regeocodeData.addressComponent.district
            console.log(this.city, 'this。city');
            this.getStationList()
          }
        });

      },

this.getStationList()   把自己的经纬度传递给后面的请求，最开始不知道是怎么写的，它总是先执行后面的请求，不先打印   // console.log(data, '高德地图');  最后，我使用这种方法，它可以先打印了，后发送请求，都是慢慢摸索的过程，写篇文章记录下

 // 发送请求
      async getStationList() {
       
        console.log(this.longitude);
        console.log(this.latitude, this.longitude, '参数');
        console.log(this.stationLat, 'stationLat', 'home信息的经纬度111'); //
        const {
          data: {
            obj,
            msg,
            resCode
          }
        } = await uni.$http.post('/uniapp/。。。', {
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          stationLng: this.longitude,
          stationLat: this.latitude
        })

        console.log(obj, msg, resCode,);
        if (resCode !== "00100000") return uni.$showMsg()
      }

​