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

偏执的太偏执、 2023-10-01 20:25 15阅读 0赞

## 实现目标： ##

**实现当用户打开小程序时自动获取附近店铺显示，实现异地不可下单**  
![在这里插入图片描述][c9aa3315c2dd4b3c850b995314a053ef.gif_pic_center]

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

**打开定位服务定位到当地地区存在学校之后就会去数据库查询到学校信息：**  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]

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

数据库可以这样设计：  
![在这里插入图片描述][9bd5e419731642968537a8979f407922.png]

--------------------

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

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

第二步：  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_20_color_FFFFFF_t_70_g_se_x_16]

创建一个应用：![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_10_color_FFFFFF_t_70_g_se_x_16]  
然后得到 key ![在这里插入图片描述][2906a073e7884b7dbdb1740ef38fbd80.png]  
记住key完成下面的对接

--------------------

## 逆运算调试demo： ##

这里是官方给的demo案例，用于更好的理解本次教程，所以贴出来  
先下载sdk：[JavaScriptSDK v1.2][]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_9_color_FFFFFF_t_70_g_se_x_16]

wxml代码：

<map id="myMap"
        markers="{
        {markers}}"
        style="width:100%;height:300px;"
        longitude="{
        {poi.longitude}}"
        latitude="{
        {poi.latitude}}" scale='16' show-location>
    </map>
    
    <form bindsubmit="formSubmit">
        
        <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);
          }
        })
    }
    })

好，我们看一下演示：  
这里介绍个经纬度查询的网站：[经纬度在线查询][Link 2]

输入：云南省德宏州芒市 得到经纬度：98.588694,24.453881  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_20_color_FFFFFF_t_70_g_se_x_16 1]

复制到小程序里面（记得调换位置）![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
**观察console.log的返回  
adcode为地区码  
city\_code为城市码**

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

**原位置：**  
24.453881,98.588694  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_12_color_FFFFFF_t_70_g_se_x_16]  
**新位置：**  
24.434655,98.592268  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
最后后台打印![在这里插入图片描述][0003e823da574228921d232b1d7d613d.png]  
对比得知，当在同个城市同个地区所返回的逆地址解析就是相同的，  
可以根据这一点，完成自己的业务处理，当前端给出的经纬度通过该接口获得的两个码去查符合条件的数据

## 小程序定位授权设置： ##

小程序必须在app.json写入  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_19_color_FFFFFF_t_70_g_se_x_16]

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

运行后  
![在这里插入图片描述][35b22746404148828b2c3483f0be070d.gif_pic_center]

## 总结： ##

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

[c9aa3315c2dd4b3c850b995314a053ef.gif_pic_center]: https://img-blog.csdnimg.cn/c9aa3315c2dd4b3c850b995314a053ef.gif#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://img-blog.csdnimg.cn/1f9764a395a94e269c37751ab828b521.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b635a6P5aSn6a2U546L,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]: https://img-blog.csdnimg.cn/779ba91e9d514cd1878d7676639a7524.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b635a6P5aSn6a2U546L,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[9bd5e419731642968537a8979f407922.png]: https://img-blog.csdnimg.cn/9bd5e419731642968537a8979f407922.png
[Link 1]: https://lbs.qq.com
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/07adfe7ba7654ca991b847c24b475c83.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b635a6P5aSn6a2U546L,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_10_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/3d66842b8013418591629c5b38b9a892.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b635a6P5aSn6a2U546L,size_10,color_FFFFFF,t_70,g_se,x_16
[2906a073e7884b7dbdb1740ef38fbd80.png]: https://img-blog.csdnimg.cn/2906a073e7884b7dbdb1740ef38fbd80.png
[JavaScriptSDK v1.2]: https://mapapi.qq.com/web/miniprogram/JSSDK/qqmap-wx-jssdk1.2.zip
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_9_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/a3e681007f474fc5a2dc5078cadb97be.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b635a6P5aSn6a2U546L,size_9,color_FFFFFF,t_70,g_se,x_16
[Link 2]: https://map.yanue.net
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/25c46b27ddf54a238f3017de19968328.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b635a6P5aSn6a2U546L,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/e045e51749634244b89e469a6ed5f932.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b635a6P5aSn6a2U546L,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_12_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/e0483ce4fbd44a02a6426e47d6174e5b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b635a6P5aSn6a2U546L,size_12,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/d0e1d0cd595249cb84ab8d74d8415957.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b635a6P5aSn6a2U546L,size_20,color_FFFFFF,t_70,g_se,x_16
[0003e823da574228921d232b1d7d613d.png]: https://img-blog.csdnimg.cn/0003e823da574228921d232b1d7d613d.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5b635a6P5aSn6a2U546L_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/7aec536d20754caea1d99951ac43c3eb.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b635a6P5aSn6a2U546L,size_19,color_FFFFFF,t_70,g_se,x_16
[35b22746404148828b2c3483f0be070d.gif_pic_center]: https://img-blog.csdnimg.cn/35b22746404148828b2c3483f0be070d.gif#pic_center