欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > 微信小程序仿饿了么地址定位、筛选与回传

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:789

HTML5自适应律师工作室类网

2020-04-04   浏览:654

高端HTML5响应式企业通用网

2020-05-06   浏览:560

html5响应式外贸网站英文版

2020-05-08   浏览:545

HTML5影视传媒文化公司类网

2020-05-12   浏览:543

微信小程序仿饿了么地址定位、筛选与回传

发布时间:2021-01-07  

通过本文你可以了解到:

通过qqmapsdk.reverseGeocoder()获取当前定位中文地址 通过qqmapsdk.getSuggestion()关键字搜索获取周边地址 通过WxNotification回传数据到上一页

先来浏览一下效果图:

微信小程序仿饿了么地址定位、筛选与回传

请求用户地理定位

通过腾讯地图api实现,下载地址:

1.自动定位以及返回10个相近位置

核心代码如下:

//引入类库 var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js') qqmapsdk = new QQMapWX({ key: 'BJFBZ-ZFTHW-Y2HRO-RL2UZ-M6EC3-GMF4U' }); qqmapsdk.reverseGeocoder({ get_poi: 1, success: function(res){ that.setData({ currentAddress: res.result.formatted_addresses.recommend, city: res.result.address_component.city, result: res.result.pois }); } });

其中get_poi设置为1,可以返回得到当前定位周边的10个相近位置

2.关键字搜索

核心代码:

var keyword = e.detail.value; qqmapsdk.getSuggestion({ keyword: keyword, region: that.data.city, success: function(res){ that.setData({ result: res.data }); } });

其中region参数,传入之前reverseGeocoder获取得到的城市信息,以过滤非本城市以外的其他搜索结果。

回传数据到首页

这里用到了第三方库WxNotification

下载地址:https://github.com/icindy/WxNotificationCenter

核心方法如下:

//引入类库 var WxNotificationCenter = require("../../utils/WxNotificationCenter.js"); //index.js 初始化注册通知 WxNotificationCenter.addNotification("getAddressNotification",that.getAddress,that) //index.js 监听通知,通过成员方法getAddress回调得到期望的参数值address WxNotificationCenter.addNotification("addressSelectedNotification",that.getAddress,that) //search.js 发送通知,带上address参数值 WxNotificationCenter.postNotificationName("addressSelectedNotification", address);

实现getAddress方法

getAddress: function(address) { that.setData({ address: address }); }

本文同期视频教程已经传到了自家小程序【灵动云课】上,感兴趣的朋友可以在线观看。

本文源码下载: