由于微信小程序只提供了获取地理位置(经纬度)、速度的api,并没有获取地理位置的信息。因此,我们需要利用第三方地图api来解决这个问题。

    原理
    通过调用wx.getLocation()获取到设备当前所在地理位置的经纬度。再申请一个第三方地图api的ak(访问应用),然后通过ajax请求把ak和经纬度传给第三方服务端,该服务端返回地理位置信息。

    1,这里使用了百度地图的api,进入百度地图开发平台,创建一个应用,申请一个ak。
    2,调用wx.getLocation()获取到设备当前的经纬度。
    3,用ajax把ak和经纬度(lat<纬度>,lng<经度>)传给百度地图服务端即可。

    1. getCity: function(e) {
    2. var that = this;
    3. console.log(e);
    4. //返回true和false
    5. console.log(e.detail.value);
    6. //选中状态
    7. if (e.detail.value){
    8. wx.showLoading({
    9. title: '加载中',
    10. });
    11. wx.getLocation({
    12. success: function (res) {
    13. console.log(res);
    14. console.log(res.latitude);
    15. console.log(res.longitude);
    16. const url= 'http://api.map.baidu.com/geocoder/v2/';
    17. const ak = '填上自己申请的ak';
    18. //小程序的ajax请求需要在后台安全域名配置增加 开发测试中在详情里勾选-不校验合法域名即可
    19. wx.request({
    20. url,
    21. data: {
    22. ak,
    23. location: `${res.latitude},${res.longitude}`,
    24. output: 'json', //格式
    25. },
    26. success: function (res){
    27. console.log(res);
    28. if(res.data.status == "0"){
    29. that.setData({
    30. province: res.data.result.addressComponent.province,
    31. city: res.data.result.addressComponent.city,
    32. district: res.data.result.addressComponent.district,
    33. isShow: true
    34. });
    35. wx.hideLoading()
    36. }else{
    37. that.setData({
    38. unGeo: '未知位置',
    39. isShow: false
    40. });
    41. wx.hideLoading()
    42. }
    43. }
    44. })
    45. }
    46. })
    47. }
    48. }