• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

[微信小程序] 微信小程序获取用户定位信息并加载对应城市信息,wx.getLocation,腾讯 ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

然而小程序自带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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序----map组件实现检索【定位位置】周边的POI发布时间:2022-07-18
下一篇:
小程序map地图多点定位发布时间:2022-07-18
热门推荐
    热门话题
    阅读排行榜

    扫描微信二维码

    查看手机版网站

    随时了解更新最新资讯

    139-2527-9053

    在线客服(服务时间 9:00~18:00)

    在线QQ客服
    地址:深圳市南山区西丽大学城创智工业园
    电邮:jeky_zhao#qq.com
    移动电话:139-2527-9053

    Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap