微信公众号JSSDK定位与百度LBS结合实现线下店铺一键导航功能

微信的JSSDK有两个关于地理位置的接口:

     一个是 getLocation , 用户授权同意后,可以获取用户的地理位置

     一个是openLocation,可以使用微信内置地图查看位置接口。

百度的LBS的服务接口,有LBS.云服务,利用这个云存储存储线下店铺的位置,云检索可以根据用户的位置,进行距离搜索。

好了,我们该怎么实现的这个功能呢?

第一步,基于百度地图的云存储,将线下的门店保存到百度云存储里面。

第二步,用户通过公众号进入页面的时候,获取用户的位置

第三步,将用户获取的位置发送到服务器端,服务器端向百度发起云检索,得到的数据返回给客户端。

第四部,将数据呈现给用户看,并由用户进行选择,进行导航,点击导航就利用微信内置地图查看位置接口,显示出来。

到此完成,用户就可以利用这个微信的内置地图导航了,而微信的地图导航,支持各大地图,我们就不需要考虑用户的手机上,究竟装的是高德地图,还是百度地图,还是其他的啥的。

后台效果如下:

 

前台效果:

实现功能,中间有不少的坑,不过好在都过去了。

后续有机会,更新具体的实现代码。

 

 

 

 

 

 

 

 

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要在Vue2中接入微信公众号JSSDK,您需要按照以下步骤进行操作: 1. 在公众号后台配置JS接口安全域名,确保您的域名已经添加到了微信公众平台的安全域名列表中。 2. 安装使用`weixin-js-sdk`库,可以通过npm进行安装: ``` npm install weixin-js-sdk ``` 3. 在需要使用JSSDK的组件或页面中引入`weixin-js-sdk`库: ```javascript import wx from 'weixin-js-sdk'; ``` 4. 在组件或页面的`mounted`生命周期钩子函数中初始化JSSDK,并进行相关配置: ```javascript mounted() { this.initWeChatJSSDK(); }, methods: { initWeChatJSSDK() { // 异步请求后端接口获取微信配置信息 axios.get('/api/getWeChatConfig') .then(response => { const { appId, timestamp, nonceStr, signature } = response.data; wx.config({ debug: false, appId, timestamp, nonceStr, signature, jsApiList: ['chooseImage', 'scanQRCode'] // 需要使用的JSSDK接口 }); wx.ready(() => { // JSSDK配置成功后的回调函数 console.log('JSSDK配置成功'); }); wx.error((res) => { // JSSDK配置失败后的回调函数 console.error('JSSDK配置失败', res); }); }) .catch(error => { console.error('获取微信配置信息失败', error); }); } } ``` 5. 在需要使用JSSDK的地方调用对应的接口,比如选择图片接口`chooseImage`: ```javascript methods: { chooseImage() { wx.chooseImage({ count: 1, success: function (res) { // 选择图片成功后的处理逻辑 const localIds = res.localIds; // ... }, fail: function (error) { // 选择图片失败后的处理逻辑 console.error('选择图片失败', error); } }); } } ``` 以上是在Vue2中接入微信公众号JSSDK的基本步骤,您可以根据实际需求进行相应的配置和调用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值