开发者社区> php的小菜鸟> 正文

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

简介: 思路分析: 1、在微信公众号内获取用户地理位置 需要js-sdk签名包(关于如何获取文档有介绍) 2、根据获取的地理位置ajax去后台请求,通过sql语句,查询中距离最近的门店(sql语句在网上搜的,位置是通过后台添加的) 3、根据城市查询门店列表,使用通过表单提交事件,ajax请求后台获取列表 4、百度地图导航页面要注意引入地址 一、开始开发 1、该功能的实现需要调用微信公众号的js-sdk接口实现 简介: 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。
+关注继续查看

思路分析:
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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
利用Python网络爬虫抓取微信好友的所在省位和城市分布及其可视化
前几天给大家分享了如何利用Python网络爬虫抓取微信好友数量以及微信好友的男女比例,感兴趣的小伙伴可以点击链接进行查看。今天小编给大家介绍如何利用Python网络爬虫抓取微信好友的省位和城市,并且将其进行可视化,具体的教程如下。
1373 0
快递的旅行日记 - 深度挖掘快递物流地图轨迹查询API 的使用场景
全球化经济的不断发展使得快递业变得越来越重要,而快递物流地图轨迹查询 API 也因此应运而生。
6 0
如何查看门店编号和门店二维码?
一 说明 在口碑开通的门店都有一串数字来表示其唯一性,这串数字就叫门店编号,也称shop_id   二 如何查看 1 线上测试门店查看办法 (1)登录蚂蚁开放平台【[url]https://open.
2213 0
使用SignalR实时显示淘宝买家信誉及中差评信息
注,本文使用开发环境:Visual Studio 2012.2,平台:ASP.NET MVC 4,数据库:本文未说明 一、啰嗦故事 接触SignalR已经很长一段时间了,不过也没用它写过什么像样的Demo。
1105 0
如何获取微信好友的地理位置信息
方倍工作室微信公众账号提供网页版定位型漂流瓶功能,可以精确定位到打开标瓶的用户坐标地址。   一位中年男子因和老婆吵架,老婆一气之下离家出走,电话不接,每天发微信也不回,他想通过微信知道老婆在哪。
1953 0
自制一个可爱的 社交门户网站 的用户等级表
等级 称号 所需经验值 总经验 0 出生平民1.0 0 0 1 出生平民2.0 1 1 2 出生平民3.
2077 0
微信发布无现金生活画像:微信支付最活跃TOP10城市排名
  “8.8无现金日”是去年由微信支付倡导发起的全球首个移动支付节日,今年共有超过1亿人次、全国近70万家门店参与。那么无现金生活画像是怎么样?微信支付最活跃TOP10城市排名是哪些呢?   数据显示,北京、广州、深圳、上海、杭州、成都、武汉、西安、沈阳、天津这十个微信支付最为活跃。
1061 0
+关注
php的小菜鸟
热爱编程,忠于开源的小码农
文章
问答
视频
文章排行榜
最热
最新
相关电子书
更多
QQ 空间百亿级流量的社交广告系统海量实践
立即下载
地图场景的LBS智能信息分发技术
立即下载
社交数据分析-好友推荐
立即下载