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

通过本文你可以了解到：

通过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

});

}

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

android 仿饿了么地图,微信小程序仿饿了么地址定位、筛选与回传相关推荐

android微信运动页面开发,微信小程序仿微信运动步数排行(交互)
微信小程序仿微信运动步数排行(交互) 发布时间:2020-08-20 00:51:02 来源:脚本之家阅读:101 作者:祈澈姑娘本文介绍了微信小程序仿微信运动步数排行(交互),分享给大家,也给自 ...
21小时精通微信小程序开发(仿猫眼电影App、微信小程序问答)
21小时精通微信小程序开发(仿猫眼电影App.微信小程序问答) 网盘地址:https://pan.baidu.com/s/1GTpPX4A1U-w_3i6k7lLztQ 密码: 5pcz 备用地址(腾 ...
微信小程序仿系统自带下拉刷新效果
微信小程序仿系统自带下拉刷新效果前言思路分析实现尾巴前言看到标题也许有人会说:系统不是已经自带了下拉刷新,你去仿照系统的下拉刷新是不是吃多了没事干?其实真相并不是这样的.在微信小程序手把手 ...
微信小程序仿微信SlideView组件slide-view
微信小程序仿微信SlideView组件. 使用 1.安装 slide-view 从小程序基础库版本 2.2.1 或以上.及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装 ...
Java微信运动步数排序设计_微信小程序仿微信运动步数排行(交互)
本文介绍了微信小程序仿微信运动步数排行(交互),分享给大家,也给自己留个笔记,废话不多说了,具体如下: 效果图如下: wxml: {{item.name}} {{item.steps}} wxss: ...
小程序源码：仿各大APP种树微信小程序源码下载-简单快速上手
这是一款仿各大APP的种树获取水果的一款微信小程序可以对树浇水,杀虫,修剪等等另外还有夺宝,更多小程序推荐支持流量主模式等等可以进行邀请好友加快树木的成长速度小程序源码下载地址: 小程序源码 ...
微信小程序仿网易云音乐（使用云开发，提供源码）
微信小程序仿网易云音乐(使用云开发,提供源码)!!!!!!!!!!! 源码: 链接:https://pan.baidu.com/s/1z_ZnRVbT4vjEENimi8yBQQ 提取码:u0o3 一 ...
微信小程序-仿朋友圈点赞评论操作面板
目录微信小程序-仿朋友圈点赞评论操作面板一.效果二.实现 1.wxml实现 2.js实现 3.wxss实现三.记录 1.dataset使用微信小程序-仿朋友圈点赞评论操作面板一.效果二. ...
仿【得物】微信小程序实战全教程（动手就会）
前言最近正在学习微信小程序开发,也是与两个同学一起合作着手仿做得物APP微信小程序.这里主要分享一下我的学习过程及踩过的一些坑,希望对您有所帮助. "我自己是一名从事了6年web前端开发的 ...
仿【得物】微信小程序实战全教程
前言最近正在学习微信小程序开发,也是与两个同学一起合作着手仿做得物APP微信小程序.这里主要分享一下我的学习过程及踩过的一些坑,希望对您有所帮助. 006.gif 开发准备微信开发者工具 VSco ...

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

android 仿饿了么地图,微信小程序仿饿了么地址定位、筛选与回传相关推荐

最新文章

热门文章