微信小程序接入腾讯地图或者高德地图地址逆解析(经纬度转省市区)

2,967 阅读1分钟

后端给出了一个根据省市查询的接口,开发时发现小程序的api  wx.getLocation 只能获取到所在经纬度,就只能借助第三方地图工具解析了

先以高德地图为例

1.需要在 高德开放平台 创建一个项目,生成key;

2.下载小程序sdk,放到小程序目录下,我放在了 util 下;


3.小程序后台配置 https://restapi.amap.com 为安全域名;

4.页面代码

var app = getApp()

var amapFile = require('../../../utils/amap-wx.js')
var aMapFun

onLoad: function(options) {
    aMapFun = new amapFile.AMapWX({
       key: '高德地图生成的key'
     });
},
getLo(){
  wx.getLocation({
     //微信获取定位api
      success: res=> {
        aMapFun.getRegeo({    //调用高德逆解析api
          location: res.longitude + "," + res.latitude,
          success:data=>{
            console.log(data,'高德')
            let province = data[0].regeocodeData.addressComponent.province;
            let city = data[0].regeocodeData.addressComponent.city;
            // 解决city:[]问题,例如北京市,高德返回的city是个空数组
            if (Object.prototype.toString.call(city) == "[object Array]") {
              city = city.join('');
            }
             
         },
          fail:err=>{
             // 第三方地图插件接口调用都有次数限制,需要在此做容错处理
          }
        })
      },
      fail:err=>{}    })
}

腾讯地图同理,区别是两个平台的日调用上限和并发根据账号主体有所不同,

1.  腾讯地图开放平台 注册并生成key,腾讯地图要勾选 WebServiceAPI 不然会出现调用失败问题


2. 下载腾讯的sdk,放到 util 文件夹下

3. 页面代码

var app = getApp()
var QQMapWX = require('../../../utils/qqmap-wx-jssdk.js')
var qqmapsdk
onLoad: function(options) {
    qqmapsdk = new QQMapWX({
      key: '腾讯地图申请的key'
    });
},
getLo() {
    wx.getLocation({
      success: res=> {
        qqmapsdk.reverseGeocoder({
          location: {
            latitude: res.latitude,
            longitude: res.longitude
          },
          success: result=> {
            console.log(result);
            if (result.status === 0) {
              this.data.searchObj.province = result.result.address_component.province;
              this.data.searchObj.city = result.result.address_component.city
            } 
          },
          fail: function(result) {
            //容错
          }
        })
      },
      fail:err=>{
      }
    })
  }