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

目录

前言

第一步

 第二步

第三步

---

前言

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

 我之前一直坚持只使用 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);
            let address = data[0].regeocodeData.addressComponent.district
			console.log('address', address);
			if (address.length <= 0) {
				this.city = data[0].regeocodeData.addressComponent.city
			} else {
				this.city = data[0].regeocodeData.addressComponent.district
			}
			console.log('用户当前城市显示的是：', 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()
      }

后续

因不小心动了配置文件 - manifest.json 导致地图现在报 

a.fail is not a function

 以及    getStorage:fail data not found

后面在全局文件搜索  getStorage 找到位置 并打印

getLocation:fail the api need to be declared in the requiredPrivateInfos field in app.json/ext.json 

api需要在app.json/ext.json中的requiredPrivateInfos字段中声明

 解决

1.先在 微信小程序配置这项 选择位置接口 以及 填入描述

 2.填入成功之后 会自动生成 下面代码

 则 直接在它后面加入 requiredPrivateInfos 以及配置内容

 "permission": {
      "scope.userLocation": {
        "desc": "获取用户位置"
      }
    },

   "requiredPrivateInfos": [
      "getLocation",
      "onLocationChange",
      "startLocationUpdateBackground",
      "chooseAddress"
    ]