[微信小程序] 微信小程序获取用户定位信息并加载对应城市信息，wx.getLocation，腾讯地图小程序api，微信小程序经纬度逆解析地理信息

因为需要在小程序加个定位并加载对应城市信息

然而小程序自带api目前只能获取经纬度不能逆解析，虽然自己解析方式，但是同时也要调用地图，难道用户每次进小程序还要强行打开地图选择地址才定位吗？多麻烦也不利于用户体验

我就不多说什么了，直接上代码

微信小程序获取用户定位信息并加载对应城市信息  wx.getLocation  腾讯地图小程序api  微信小程序经纬度逆解析地理信息

  1  //加载腾讯位置服务js文件（必须）
       var qqmap=require('../../utils/qqmap-wx-jssdk.min.js')

   //预加载内容
  2   onLoad: function () {
  3 
  4     //调用腾讯地图sdk  添加腾讯地图key
  5 
  6     var demo = new qqmap({
  7       key: '*****-*****-*****-*****-SY7PH-SMFTK'
  8     });
  9 
 10     //此声明最好不要写在 wx.getLocation方法内，this指代不同
 11 
 12     var that = this;
 13     wx.getLocation({
 14       type: 'gcj02',  //编码方式，
 15       success: function (res) {
 16         var latitude = res.latitude   // wx.getLocation 获取当前的地理位置、速度   latitude(维度)  longitude（经度）
 17         var longitude = res.longitude
 18         demo.reverseGeocoder({  
                //腾讯地图api 逆解析方法 首先设计经纬度
 19           location: {
 20             latitude: res.latitude,
 21             longitude: res.longitude
 22           },
　　　　　　　　　　//逆解析成功回调函数
 23           success: function (res) {
 24             getApp().globalData.cityname = res.result.address_component.city;   //全局变量存放城市   res.result.address_component.city 获取解析之后地址中的城市 33             
　　　　　　　　　 console.log("onLoad");

　　　　　　　　　　//wx.request 发起网络请求，类似于ajax
 34             wx.request({
 35               url: 'https://www.xxxxxxxxxx.com/home/index/xcx_index',  //填写对应服务器地址
 36               data: {
 37                 // cityid: getApp().globalData.cityid,     //我这里需要提交的参数，这里我是把获取的城市发给后台，然后后台给我对应城市的数据json文件
 38                 cityna: getApp().globalData.cityna,
 39                 district: res.result.address_component.city,
 40               },
 41               header: {
 42                 "Content-Type": "applicatiSon/x-www-form-urlencoded"
 43               },
 44               method: "POST",
 45               success: function (res) {
 46                 console.log(res.data.data);   
　　　　　　　　　　　　　　//解析回调函数得到的json文件并一层一层的解析然后数据绑定到页面上
 47                 that.setData({
 48                   // 轮播图图片
 49                   imgurls: res.data.data.pics 58                 });
 59                 getApp().globalData.cityid = res.data.data.datacompany.cityid;
 60                 // this.data.pic_array_dq2[e.detail.value].name
 61               }
 62             });
　　·　　　　　　　　// 成功后提醒
 63             wx.showModal({
 64               title: '定位成功',
 65               content: '当前城市：' + getApp().globalData.cityname,
 66             });
 67            
 68           },
 69           fail: function (res) {
　　　　　　　　　　//失败的回调函数
 70             // console.log(res);
 71           },
 72           complete: function (res) {
　　　　　　　　　　//完成之后的回调函数，不管是否成功
 73             console.log("逆解析状态码："+res.status);  //res.status  获取状态码，为0代表解析成功，但是我们要考虑失败的兼容，可能用户并不愿意同意获取地理位置，所以不为0 的时候也要加载内容给个默认地址
 74             if (res.status!=0){
 75               wx.request({
 76                 url: 'https://www.cyzs97.com/home/index/xcx_index',
 77                 data: {
 78                   // cityid: getApp().globalData.cityid,
 79                   cityna: getApp().globalData.cityna,
 80                   district:"",
 81                 },
 82                 header: {
 83                   "Content-Type": "applicatiSon/x-www-form-urlencoded"
 84                 },
 85                 method: "POST",
 86                 success: function (res) {
 87                   console.log(res.data.data);
 88                   that.setData({
 89                     // 轮播图图片
 90                     imgurls: res.data.data.pics,   99                   });
100                   getApp().globalData.cityid = res.data.data.datacompany.cityid;
101                   // this.data.pic_array_dq2[e.detail.value].name
102                 }
103               });
　　　　　　　　　　　　//提示用户失败可开启定位服务
104               wx.showModal({
105                 title: '定位失败',
106                 content: '定位失败，未授权获取当前位置或服务错误' ,
107               });
108             }
109             console.log("定位获取的：" + getApp().globalData.cityname); 
110           }
111         });
112       }
113     });
114         
115     },

 当然最重要的不能忘记，需要配置服务器，只需安全域名设置，需要在微信公众平台添加域名地址 https://apis.map.qq.com

posted @ 2017-12-08 13:03  熊一乐  阅读(15008)  评论(2)  编辑  收藏  举报