小程序模板网

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

2017-12-05 焰慧地

1.获取当前定位中文地址 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



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18036.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询