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）：
备注：支持使用 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="https://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+'" > <img src="'https://www.jb51.net/+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+'" > <i></i> 一键导航 <span> '+el.distance/1000+'km </span> </a> </li> </ul> </div> </div>'); }) } }); }, cancel: function (res) { $(".city").triggerHandler("focus"); } }); }); </script>
控制器中获取门店通过sql语句获取距离一定距离的门店的列表：