微信小程序:获取经纬度,逆地理编码获取位置城市信息

1. 获取用户当前所在城市信息

在开发的时候经常需要获取用户当前所在的位置信息,比如省市,邮编,附近的酒店,影院等,这时候就需要通过小程序自带的方法和百度地图api:

通过微信小程序wx.getLocation接口获取用户当前位置经度和纬度;
通过百度地图逆地理API,将获取的经度和纬度转化为城市名称;

1.1 获取定位信息(经度和纬度)

获取用户位置前,需要用户允许,也就是需要弹出弹窗获取用户权限,需要在app.json中配置如下权限:
用户授权官方文档

"permission": {
   "scope.userLocation": {
     "desc": "您的位置信息将用于小程序获取影院信息" 
   }
 }

授权弹窗

配置权限成功以后,在用户第一次启动小程序的时候,会弹出授权弹窗,在用户点击允许以后,在调用wx.getLocation时在success中会返回当前的地理信息; 如果用户点击不允许,在getLocation中就会返回failure(获取位置信息失败);

1.2 微信小程序网络请求

在使用百度地图逆地理API通过经度和纬度获取城市的时候,需要调用wx.request api来发起网络请求.

1.2.1 网络请求域名配置

每个微信小程序需要事先设置通讯域名，小程序只可以跟指定的域名进行网络通信。包括普通 HTTPS 请求（wx.request）、上传文件（wx.uploadFile）、下载文件（wx.downloadFile) 和 WebSocket 通信（wx.connectSocket）。

域名配置官方文档链接
 配置百度地图域名示例

配置成功示例

1.2.2 发送网络请求wx.request

直接使用wx.request发送网络请求,示例代码如下:

wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

wx.request接口及参数说明官方文档

1.3 百度地图逆地理api的使用

在获取经度和纬度成功以后,通过百度地图的api,将经度和纬度作为参数,可以获得当前城市信息,城市名称,街道,位置等相关信息,以下是请求链接示例:
百度地图web端逆地理api文档

 http://api.map.baidu.com/reverse_geocoding/v3/?ak=您的ak&output=json&coordtype=wgs84ll&location=31.225696563611,121.49884033194   
 //GET请求

需要传入的参数:

ak : 应用的ak
output: 返回参数的类型(一般为json)
coordtype: 坐标系类型微信的getLocation参数type为wgs84返回:gps坐标,所以获取的精度和纬度是使用的gps坐标
location:位置(经度+纬度)

1.3.1 创建百度地图应用申请AK

首先要申请一个 AK :申请链接

image.png

创建成功以后会有应用编号和ak等信息,在请求逆地理api的时候使用.

1.4 wx.getLocation及wx.request的使用

1.4.1 获取经纬度及逆地理获取城市

getCity:function(success){
    wx.getLocation({
      type: 'wgs84',
      altitude: true,
      success: (result) => {
        wx.db.ToastSuccess('获取位置成功');
        wx.request({
          url: 'https://api.map.baidu.com/reverse_geocoding/v3',
          data: {
            ak:'8TxcPq4YTwDSfLUgA09d',
            output:'json',
            coordtype:'wgs84ll',
            location:`${result.latitude},${result.longitude}`
            // location: res.latitude + ',' + res.longitude  
          },
          success: (cityResult) => {
            //console.log(cityResult);
            let city = cityResult.data.result.addressComponent.city;
            city = city.substring(0,city.length - 1);
            console.log('城市:',city);
            success && success(city);
          },
          fail: () => {},
          complete: () => {}
        });
      },
      fail: () => {
        wx.db.ToastError('获取位置失败');
      },
      complete: () => {}
    });
   },