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