因为需要在小程序加个定位并加载对应城市信息
然而小程序自带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