前往小程序,Get更优阅读体验!
立即前往
腾讯云
开发者社区
文档 建议反馈 控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
发布
首页
学习
活动
专区
工具
TVP 最新优惠活动
返回腾讯云官网
社区首页 > 专栏 >校园跑腿小程序通过位置获取当前学校

校园跑腿小程序通过位置获取当前学校

作者头像
德宏大魔王
发布2023-08-08 13:27:44
2660
发布2023-08-08 13:27:44
举报
文章被收录于专栏: cloud stdio

实现目标:

实现当用户打开小程序时自动获取附近店铺显示,实现异地不可下单

在这里插入图片描述
在这里插入图片描述

如果没有打开定位 或者 当前经纬度不在目标地区 就像这样没有数据:

没有打开定位服务时
没有打开定位服务时

打开定位服务定位到当地地区存在学校之后就会去数据库查询到学校信息:

在这里插入图片描述
在这里插入图片描述

图片底部中,最下面是当前地址,当前地址可以根据逆地址解析获取,上面的是附近学校(通过城市码和地区码对比),在搜索到其他关联的店铺数据

数据库可以这样设计:

在这里插入图片描述
在这里插入图片描述

腾讯云位置服务注册获得key:

第一步,点击 腾讯位置服务登陆后注册进控制台

第二步:

在这里插入图片描述
在这里插入图片描述

创建一个应用:

在这里插入图片描述
在这里插入图片描述

然后得到 key

在这里插入图片描述
在这里插入图片描述

记住key完成下面的对接


逆运算调试demo:

这里是官方给的demo案例,用于更好的理解本次教程,所以贴出来 先下载sdk: JavaScriptSDK v1.2

在这里插入图片描述
在这里插入图片描述

wxml代码:

代码语言:javascript
复制
<!--wxml-->
<!--longitude及latitude为设置为调转到指定坐标位置,默认不显示-->
<map id="myMap"
    markers="{{markers}}"
    style="width:100%;height:300px;"
    longitude="{{poi.longitude}}"
    latitude="{{poi.latitude}}" scale='16' show-location>
</map>
<!--form表单-->
<form bindsubmit="formSubmit">
    <!--地址输入框,例:39.984060,116.307520-->
    <input style="border:1px solid #000;" name="reverseGeo"></input>
    <!--提交表单按钮-->
    <button form-type="submit">逆地址解析</button>
</form>
<view>当前位置为:{{markers[0].title}}</view>

js代码: 下方请自行引用js脚本,以及刚刚提及到的key

代码语言:javascript
复制
// 引入SDK核心类,js文件根据自己业务,位置可自行放置
var QQMapWX = require('../../../utils/qqmap-wx-jssdk.min');
var qqmapsdk = new QQMapWX({
  key: '必填' // 必填
});  
Page({


 
//在Page({})中使用下列代码
//触发表单提交事件,调用接口
formSubmit(e) {
  console.log(e.detail.value.reverseGeo);
    var _this = this;
    qqmapsdk.reverseGeocoder({
      //位置坐标,默认获取当前位置,非必须参数
      /**
       * 
       //Object格式
        location: {
          latitude: 39.984060,
          longitude: 116.307520
        },
      */
      /**
       *
       //String格式
        location: '39.984060,116.307520',
      */
      location: e.detail.value.reverseGeo || '', //获取表单传入的位置坐标,不填默认当前位置,示例为string格式
      //get_poi: 1, //是否返回周边POI列表:1.返回;0不返回(默认),非必须参数
      success: function(res) {//成功后的回调
        console.log(res.result);
 
      },
      fail: function(error) {
        console.error(error);
      },
      complete: function(res) {
        // console.log(res);
      }
    })
}
})

好,我们看一下演示: 这里介绍个经纬度查询的网站: 经纬度在线查询

输入:云南省德宏州芒市 得到经纬度:98.588694,24.453881

在这里插入图片描述
在这里插入图片描述

复制到小程序里面(记得调换位置)

在这里插入图片描述
在这里插入图片描述

观察console.log的返回 adcode为地区码 city_code为城市码

当我们在细化这个位置或者在这个位置的周边地点,让他经纬度不一样时再次观察,我们以下方的人民医院为例子:

原位置: 24.453881,98.588694

在这里插入图片描述
在这里插入图片描述

新位置: 24.434655,98.592268

在这里插入图片描述
在这里插入图片描述

最后后台打印

在这里插入图片描述
在这里插入图片描述

对比得知,当在同个城市同个地区所返回的逆地址解析就是相同的, 可以根据这一点,完成自己的业务处理,当前端给出的经纬度通过该接口获得的两个码去查符合条件的数据

小程序定位授权设置:

小程序必须在app.json写入

在这里插入图片描述
在这里插入图片描述
代码语言:javascript
复制
"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  },  

写了之后才能调用wx.getLocation()方法 如果需要使小程序进入就询问获得定位能力可以在onload写入 例如:

代码语言:javascript
复制
    onLoad: function (options) {
        let that=this;
        that.getLocation();//定位
    },
      //获取经纬度
getLocation: function (e) {
  var that = this;
  wx.getLocation({
     //坐标系可选
    type: 'gcj02',
    altitude:true,
    success: function (res) {
      console.log(res);
      var latitude = res.latitude
      var longitude = res.longitude
      var new_lat_long=latitude+","+longitude
      that.get_address_code(new_lat_long);
      //坐标换算位置城市id
      //弹框
      // wx.showModal({
      //   title: '当前位置',
      //   content: "纬度:" + latitude + ",经度:" + longitude,
      // })
    }
  })
},
//得到详细地址以及获得城市码、地区码
  get_address_code:function(e) {
      console.log(e);
        var _this = this;
        qqmapsdk.reverseGeocoder({
        
          location: e || '', //获取表单传入的位置坐标,不填默认当前位置,示例为string格式
          //get_poi: 1, //是否返回周边POI列表:1.返回;0不返回(默认),非必须参数
          success: function(res) {//成功后的回调
            console.log(res.result);
              _this.setData({
                address:res.result.address,
                adcode:res.result.ad_info.adcode,
                city_code:res.result.ad_info.city_code
              })
              //获取当地地区
//其他业务自己写在这里
          },
          fail: function(error) {
            console.error(error);
          },
          complete: function(res) {
            // console.log(res);
          }
        })
    },

运行后

在这里插入图片描述
在这里插入图片描述

总结:

通过微信小程序前端getLocation()获取当前经纬度 通过 腾讯云位置服务换算逆向地址->获得城市码(city_code)、地区码->去数据库查询符合ctiy_code和adcode的数据

本文参与  腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-02-28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与  腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
LV.
文章
0
获赞
0
目录
  • 实现目标:
  • 腾讯云位置服务注册获得key:
  • 逆运算调试demo:
  • 小程序定位授权设置:
  • 总结:
相关产品与服务
数据库
云数据库为企业提供了完善的关系型数据库、非关系型数据库、分析型数据库和数据库生态工具。您可以通过产品选择和组合搭建,轻松实现高可靠、高可用性、高性能等数据库需求。云数据库服务也可大幅减少您的运维工作量,更专注于业务发展,让企业一站式享受数据上云及分布式架构的技术红利!
产品介绍
精选特惠 用云无忧
领券
问题归档 专栏文章 快讯文章归档 关键词归档 开发者手册归档 开发者手册 Section 归档

国外留学毕业证书制作公司哈尔滨定做国外本科毕业证定做广州代做海外学历证定做重庆代办海外博士毕业证代办上海制作国外留学生学位证定做武汉代办海外证书代办昆明办国外留学学位证代做武汉办理国外留学文凭广州代做海外毕业证补办上海做海外学历南宁定做国外学位证办理大连做海外证书办理沈阳补办海外证件代办沈阳办理国外文凭毕业证合肥定做国外学位证兰州做海外证书代办长沙制作海外成绩单办理福州代做海外学位证代办北京代办海外毕业证制作北京补办国外学位证定做青岛做国外学历代办南宁国外学历证制作西安代办国外文凭毕业证代做上海制作国外大学毕业证定做石家庄办理海外成绩单补办合肥海外大学毕业证制作乌鲁木齐国外本科毕业证定制郑州办理国外毕业证定制杭州海外学位证书珠海制作国外学历办理长沙代做海外毕业证定制淀粉肠小王子日销售额涨超10倍罗斯否认插足凯特王妃婚姻让美丽中国“从细节出发”清明节放假3天调休1天男孩疑遭霸凌 家长讨说法被踢出群国产伟哥去年销售近13亿网友建议重庆地铁不准乘客携带菜筐雅江山火三名扑火人员牺牲系谣言代拍被何赛飞拿着魔杖追着打月嫂回应掌掴婴儿是在赶虫子山西高速一大巴发生事故 已致13死高中生被打伤下体休学 邯郸通报李梦为奥运任务婉拒WNBA邀请19岁小伙救下5人后溺亡 多方发声王树国3次鞠躬告别西交大师生单亲妈妈陷入热恋 14岁儿子报警315晚会后胖东来又人满为患了倪萍分享减重40斤方法王楚钦登顶三项第一今日春分两大学生合买彩票中奖一人不认账张家界的山上“长”满了韩国人?周杰伦一审败诉网易房客欠租失踪 房东直发愁男子持台球杆殴打2名女店员被抓男子被猫抓伤后确诊“猫抓病”“重生之我在北大当嫡校长”槽头肉企业被曝光前生意红火男孩8年未见母亲被告知被遗忘恒大被罚41.75亿到底怎么缴网友洛杉矶偶遇贾玲杨倩无缘巴黎奥运张立群任西安交通大学校长黑马情侣提车了西双版纳热带植物园回应蜉蝣大爆发妈妈回应孩子在校撞护栏坠楼考生莫言也上北大硕士复试名单了韩国首次吊销离岗医生执照奥巴马现身唐宁街 黑色着装引猜测沈阳一轿车冲入人行道致3死2伤阿根廷将发行1万与2万面值的纸币外国人感慨凌晨的中国很安全男子被流浪猫绊倒 投喂者赔24万手机成瘾是影响睡眠质量重要因素春分“立蛋”成功率更高?胖东来员工每周单休无小长假“开封王婆”爆火:促成四五十对专家建议不必谈骨泥色变浙江一高校内汽车冲撞行人 多人受伤许家印被限制高消费

国外留学毕业证书制作公司 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化