微信小程序开发(十五)获取位置

最近又在做小程序开发的工作。这次需要获取用户的地理位置，就是在界面上显示用户所在的城市。

准备工作

准备工作就是看小程序的文档-小程序-获取位置。
这里小程序提供了一个接口wx.getLocation(OBJECT)。

接口参数

这里主要是那个type参数。

success返回

这里我们可以看见返回的数据里面和位置相关的只有经纬度latitude和longitude。但是这个是数字，用户并不需要关系这些也看不懂，用户只需要知道当前定位的城市，那么只调用这一个接口是不行。我们需要逆向地址解析。

逆向地址解析

什么是逆向地址解析

这个说白了就是根据经纬度获取所在位置的国家、省、市、区和接到等信息。其实还有正向解析，这个就是一个相反的过程了。
这是之前用高德地图的时候写的《高德地图—线路规划查询/正向地理编码/地图覆盖物》和《高德地图—天气搜索/逆向地理编码/定位》。

腾讯位置服务

腾讯位置服务腾讯提供了一些接口可以调用。

获取密匙

登录–控制台–密匙管理

填写相关信息

这里主要是应用于这里要注意。小程序端就选择浏览器，服务端使用腾讯接口就选择服务端。

微信小程序JavaScript SDK

文档地址：开发–微信小程序开发–微信小程序JavaScript SDK。

使用步骤

主要是小程序示例部分需要详细说明。

开发实例

1.项目中添加微信小程序JavaScriptSDK
我是把下载的qqmap-wx-jssdk.js放在了这里。

2.页面js文件使用

首先在Page外申明两个变量：

var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
var demo = null;

在实例化

onLoad: function () {
    demo = new QQMapWX({
      key: '开发密钥（key）' // 必填
    });
 }

调用接口

getCity: function(){
    var self = this;
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        var latitude = res.latitude
        var longitude = res.longitude
        var speed = res.speed
        var accuracy = res.accuracy

        // 调用接口
        demo.reverseGeocoder({
          location: {
            latitude: latitude,
            longitude: longitude
          },
          success: function (res) {
            self.setData({
              cityName: res.result.ad_info.city 
            })
          },
          fail: function (res) {
            self.setData({
              cityName: '深圳市'
            })
          },
          complete: function (res) {
             console.log(res);
          }
        });
      }
    })
  },

这里首先调用wx.getLocation获取到经纬度之后再调用腾讯位置服务的reverseGeocoder接口即可。剩下的就是处理返回的数据显示了。

服务端WebService API的使用

上面介绍的使用小程序端的。其实仔细看调试模式和返回的数据，还是调用的是服务端WebService API。反而还需要把微信的域名作为小程序的一个安全域名，这个我是不能忍的，我一个小程序，为什么我要添加两个不同的域名呢，而且还有一个是别人的，而且这样做也不利于以后的维护，如果项目不使用腾讯的位置服务而是百度、高德什么，那是不是我就需要修改小程序端的代码了，甚至还要写服务端代码。为什么不一次搞定了。
所以这里就有必要使用一下服务端WebService API。

获取密匙

这一步和上面类似，只是在生成密匙时我们选择的应用于是选择服务端。

服务端逆向解析

首先看文档逆地址解析(坐标位置描述)。
接口说明：
1.该请求为GET请求
http://apis.map.qq.com/ws/geocoder/v1/?location=
2.请求参数


这里其实我们只需要传递location和key参数即可。
3.实例
http://apis.map.qq.com/ws/geocoder/v1/?location=39.984154,116.307490&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77

服务端代码

router.all('/api/tengxunmap', function(req, res, next) {
    var param = req.query || req.params; 
    var latLng = param.lat;  
    var urlStr = 'http://apis.map.qq.com/ws/geocoder/v1/?location=' + latLng + '&key=AYSBZ-****************-3YB3P';
      request(urlStr, function (error, response, body) {
      if (!error && response.statusCode == 200) {
        var jsBody = JSON.parse(body);
        if (jsBody.status == 0) {
            var data = {};
            data.msg = '获取位置信息成功';
            data.status = '100';
            data.city = jsBody.result.ad_info.city;
            res.end(JSON.stringify(data));
        } else{
            var data = {};
            data.msg = '获取位置信息失败';
            data.status = '102';
            res.end(JSON.stringify(data));
        }
        res.end(body);
      }else{
        var data = {};
        data.msg = '获取位置信息失败';
        data.status = '101';
        res.end(JSON.stringify(data));
      }
  })
})

小程序客户端代码

getCity: function(){
    var self = this;
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        var latitude = res.latitude
        var longitude = res.longitude
        var speed = res.speed
        var accuracy = res.accuracy

        var lat = latitude + ',' + longitude
        wx:wx.request({
        url: 'https://api.hgdqdev.cn/api/tengxunmap',
        data: {
            lat: lat
        },
        method: 'get',
        dataType: 'json',
        success: function(res) {
            if(res.data.status == 100){
              self.setData({
                 cityName: res.data.city
              })
            }else{
             self.setData({
               cityName: '深圳市'
             })
            }
        },
        fail: function(res) {},
        complete: function(res) {},
        })
      }
    })
  },

上面我开放了我们接口，方便大家调用。
接口：https://api.hgdqdev.cn/api/tengxunmap，GET请求
参数：lat，
参数格式：var lat = latitude + ',' + longitude，比如：39.984154,116.307490
返回:

{
    msg: '获取位置信息成功',
    status: 100,  
    city: '武汉市' // 用户当前所在城市，比如：武汉市 
}

至此小程序的获取位置介绍完毕。

总结

其实使用小程序的接口还是很方便的。理清思路，看文档即可完成开发。
但是还是有一点小小的建议，既然小程序是运行在微信里面的，微信是可以获取到用户当前所在城市的，我们为什么小程序只能获取到地理左边。