【转载】微信公众号获取用户地理位置并列出附近的门店

思路分析:
1、在微信公众号内获取用户地理位置
需要js-sdk签名包(关于如何获取文档有介绍)
2、根据获取的地理位置ajax去后台请求,通过sql语句,查询中距离最近的门店(sql语句在网上搜的,位置是通过后台添加的)
3、根据城市查询门店列表,使用通过表单提交事件,ajax请求后台获取列表
4、百度地图导航页面要注意引入地址

一、开始开发

1、该功能的实现需要调用微信公众号的js-sdk接口实现

简介:
微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。
通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信 分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。

2、调用微信js-sdk的步骤:官方的网址:https://mp.weixin.qq.com/wiki

步骤一:绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

步骤二:引入JS文件

在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js
备注:支持使用 AMD/CMD 标准模块加载方法加载

步骤三:通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)
具体的使用可以查看官方的文档

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '', // 必填,公众号的唯一标识
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名,见附录1
    jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
步骤四:通过ready接口处理成功验证
wx.ready(function(){
    // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});
步骤五:通过error接口处理失败验证
wx.error(function(res){
    // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
})

自己的程序代码附上(我做的是获取用户的地理位置,就是出现一个获取地理位置的弹窗):
html页面:

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/JavaScript">
//配置信息验证接口
wx.config({
   debug: false,
   appId: '<?PHP echo $signPackage["appId"];?>',
   timestamp: '<?php echo $signPackage["timestamp"];?>',
   nonceStr: '<?php echo $signPackage["nonceStr"];?>',
   signature: '<?php echo $signPackage["signature"];?>',
   jsApiList: [
       // 所有要调用的 API 都要加到这个列表中
       'checkJsApi',
       'openLocation',
       'getLocation'
     ]
           });
//验证之后进入该函数,所有需要加载页面时调用的接口都必须写在该里面
wx.ready(function () {
//基础接口判断当前客户端版本是否支持指定JS接口
wx.checkJsApi({
   jsApiList: [
       'getLocation'
   ],
   success: function (res) {
       // alert(JSON.stringify(res));
       // alert(JSON.stringify(res.checkResult.getLocation));
       if (res.checkResult.getLocation == false) {
           alert('你的微信版本太低,不支持微信JS接口,请升级到最新的微信版本!');
           return;
       }
   }
});
                 //微信获取地理位置并拉取用户列表(用户允许获取用户的经纬度)
wx.getLocation({
   success: function (res) {
       var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
       var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
               //去数据库查询获取附近的门店
                        $.ajax({
                        type: 'post',
                        url: '__CONTROLLER__/shopList',
                        dataType: 'json',
                        data: {"latitude": latitude,"longitude":longitude},
                        success:function(shopInfo){
                        //index是下表,el是值
                               $(shopInfo).each(function(index,el){
                                    $("#list").append('<div class="item-store"> <a class="s-top ui-width-100 ui-flex" href="__CONTROLLER__/shopDetail/shop_id/'+el.shop_id+'"> ![]('+el.shop_logo.substring(1)+') <div class="s-message"> <h4>'+el.shop_name+'</h4> <div class="s-address">'+el.shop_position+'</div> </div> </a> <div class="s-bottom-block ui-width-100"> <ul>  <li> <a href="__CONTROLLER__/daohang/shop_id/'+el.shop_id+'" class="db-block"> <i class="icon iconfont"></i> 一键导航 <span class="kilemiter"> '+el.distance/1000+'km </span> </a> </li> </ul> </div> </div>');
                               })                        
                          }
                        });
   },
   cancel: function (res) {
    $(".city").triggerHandler("focus");
   }
                });
            });
</script>
控制器中获取门店通过sql语句获取距离一定距离的门店的列表:
if(IS_AJAX){
    $post = I('post.');
    //纬度小,经度大
    // 5公里范围是5000
    $longitude = $post['longitude'];//经度信息
    $latitude = $post['latitude'];//纬度信息
               //通过sql语句查询距离5公里之内的门店
    $sql = "select * from (select shop_id,shop_name,shop_tel,shop_position,shop_logo,  ROUND(6378.138*2*ASIN(SQRT(POW(SIN(($latitude*PI()/180-`shop_wei`*PI()/180)/2),2)+COS($latitude*PI()/180)*COS(`shop_wei`*PI()/180)*POW(SIN(($longitude*PI()/180-`shop_jing`*PI()/180)/2),2)))*1000) AS distance from sp_shop order by distance ) as a where a.distance<=5000";
    // $sql = "select * from (select shop_id,shop_name,shop_tel,shop_position,shop_logo, ROUND(6378.138*2*ASIN(SQRT(POW(SIN((36.09297*PI()/180-`shop_wei`*PI()/180)/2),2)+COS(36.09297*PI()/180)*COS(`shop_wei`*PI()/180)*POW(SIN((120.3743*PI()/180-`shop_jing`*PI()/180)/2),2)))*1000) AS distance from sp_shop order by distance ) as a where a.distance<=5000";
    $shopInfo = M()->query($sql);
    echo json_encode($shopInfo);exit;
    }else{
            if(session('openid')){
                //获取微信签名包信息(用户地理位置的获取)填写的配置信息中,需要写入的东西(调用签名包封装的类:http://blog.csdn.NET/bj123467/article/details/72910160)
                $jssdk = new \Home\Model\WechatModel();
                $signPackage = $jssdk->GetSignPackage();
                $this->assign('signPackage', $signPackage);
            $this->display();
            }else{
                //判断该用户是否存在
                 $model = new \Home\Model\WechatModel();
                 $openid_accesstoken = $model->openId();
                 $rst = M('user')->where(array('user_openid' => $openid_accesstoken['openid']))->find();
                 if($rst){
                    session('openid',$openid_accesstoken['openid']);
                    session('user_id', $rst['user_id']);
                    $jssdk = new \Home\Model\WechatModel();
                    $signPackage = $jssdk->GetSignPackage();
                    $this->assign('signPackage', $signPackage);
                    $this->display();exit;
                }else{
                    //如果不存在获取微信用户的基本信息
                    $userInfo = $model->getOpenId($openid_accesstoken['openid'],$openid_accesstoken['access_token']);
                    $data = array(
                        'user_img' => $userInfo['headimgurl'],
                        'user_openid' => $userInfo['openid'],
                        'user_name' => filter($userInfo['nickname']),
                        'user_register_time' => time(),
                        'city' => $userInfo['province'].'-'.$userInfo['city'],
                    );
                    $id = M('user')->add($data);
                    session('openid', $userInfo['openid']);
                    session('user_id',$id);
                    $jssdk = new \Home\Model\WechatModel();
                    $signPackage = $jssdk->GetSignPackage();
                    $this->assign('signPackage', $signPackage);
                    $this->display();
                }
            }
    }```

微信文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140841

微信门店视频开发教程:http://edu.csdn.net/course/detail/4567
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,045评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,114评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,120评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,902评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,828评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,132评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,590评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,258评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,408评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,335评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,385评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,068评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,660评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,747评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,967评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,406评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,970评论 2 341

推荐阅读更多精彩内容

  • 点击查看原文 Web SDK 开发手册 SDK 概述 网易云信 SDK 为 Web 应用提供一个完善的 IM 系统...
    layjoy阅读 13,619评论 0 15
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,278评论 25 707
  • 微信服务号开发 整体流程 域名报备,服务器搭建 Python开发环境和项目的初始化搭建; 微信公众号注册及开发模式...
    飞行员suke阅读 4,461评论 0 14
  • 《初夏语丝》 春去无眠已觉晓, 楼林何处闻啼鸟。 小城夜来风和雨, 榴红落英知多少。 (丙申芒种前十日雨后偶成)
    细阳冰清阅读 233评论 0 0
  • 小花不刻意隐瞒自己的婚姻状况,即使面对女儿。最开始的时候,她是想了很多种方法努力让孩子误以为她们的爸爸只是出差了,...
    未以安阅读 264评论 0 0