仿饿了么地址定位、筛选与回传
2017-03-03 00:00
351 查看
摘要: 1.获取当前定位中文地址
2.获取按关键搜索获取周边地址列表
3.点选地址列表选择回传给首页
通过本文你可以了解到:
通过qqmapsdk.reverseGeocoder()获取当前定位中文地址
通过qqmapsdk.getSuggestion()关键字搜索获取周边地址
通过WxNotification回传数据到上一页
先来浏览一下效果图:
其中get_poi设置为1,可以返回得到当前定位周边的10个相近位置
其中region参数,传入之前reverseGeocoder获取得到的城市信息,以过滤非本城市以外的其他搜索结果。
下载地址:https://github.com/icindy/WxNotificationCenter
核心方法如下:
实现getAddress方法
本文同期视频教程已经传到了自家小程序【灵动云课堂】上,感兴趣的朋友可以在线观看。
本文源码下载:http://git.oschina.net/dotton/demo-wx
对移动开发有兴趣的朋友可以关注我的公众号【huangxiujie85】与我交流讨论,给我留言或文章评论。
2.获取按关键搜索获取周边地址列表
3.点选地址列表选择回传给首页
通过本文你可以了解到:
通过qqmapsdk.reverseGeocoder()获取当前定位中文地址
通过qqmapsdk.getSuggestion()关键字搜索获取周边地址
通过WxNotification回传数据到上一页
先来浏览一下效果图:
请求用户地理定位
通过腾讯地图api实现,下载地址:http://lbs.qq.com/qqmap_wx_jssdk/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 }); }
本文同期视频教程已经传到了自家小程序【灵动云课堂】上,感兴趣的朋友可以在线观看。
本文源码下载:http://git.oschina.net/dotton/demo-wx
对移动开发有兴趣的朋友可以关注我的公众号【huangxiujie85】与我交流讨论,给我留言或文章评论。
相关文章推荐
- Android Map Api 使用和开发(2) 定位我的位置、地图弹出泡泡、通过经纬度获取地址
- 重定位SVN地址
- OpenStreetMap输入地址进行自动定位
- OpenStreetMap输入地址进行自动定位
- QT通过IP地址定位地址
- 自动打开注册表地址 --- 定位注册表地址 源码
- IAR STM32 函数和变量的绝对地址定位
- 使用jquery简单实现腾讯地图的地址搜索定位功能
- WINCE-如何通过map文件定位异常地址
- Android使用Google Map服务-根据地址定位
- android使用百度地图定位(获取当前经纬度和地址信息)
- Android 基于百度地图开发定位以及获取当前详细地址(一)
- 百度地图不能从定位的BDLocation里获取地址怎么办?
- OpenStreetMap输入地址进行自动定位
- js 调用百度地图,并且定位用户地址,显示省市区街,经纬度
- 操作系统 - 地址重定位
- s5pv210学习<四>定位程序运行地址
- C++内存检测(定位到确定地址,并且用hash表来保存提高了搜索效率)
- IAR FOR 8051之Z-STACK -函数存储地址定位(f8w2430.xcl自定义区域块)
- U-Boot中关于TEXT_BASE,代码重定位,链接地址相关说明