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

园游会永不打烊

发布于 2023-08-08 13:27:44

1.1K0

文章被收录于专栏：cloud stdiocloud stdio

实现目标：

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

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

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

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

数据库可以这样设计：

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

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

第二步：

创建一个应用：

然后得到 key

记住key完成下面的对接

逆运算调试demo：

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

wxml代码：

<!--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

// 引入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写入

"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  },

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

    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);
          }
        })
    },

运行后