思路分析：
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頁面：
//引入微信js文件<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> <a href="__CONTROLLER__/shopDetail/shop_id/'+el.shop_id+'" rel="external nofollow" > <img src="'+el.shop_logo.substring(1)+'"/> <div> <h4>'+el.shop_name+'</h4> <div>'+el.shop_position+'</div> </div> </a> <div> <ul> <li> <a href="__CONTROLLER__/daohang/shop_id/'+el.shop_id+'" rel="external nofollow" > <i></i> 一鍵導航 <span> '+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(); } } }以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
