小程序如何定位所在城市及发起周边搜索


Posted in Javascript onFebruary 11, 2020

request封装

为小程序get/post的promise封装

rq.js

/*
 * url {String} 请求地址接口 
 * data {Object} 请求参数 
 * param {Object} request参数
 * method {String} 指定使用post或者是get方法
*/
export function request(url, data={}, param={}, method='POST') {
 return new Promise((resolve, reject)=>{
  let postParam = {
   url, 
   method,
   data,
   // timeout
   // dataType
   // responseType
   header: {
    'content-type': 'application/json' // 默认值
   },
   success(res) {
    resolve(res)
   },
   error: function (e) {
    reject(e)
   }
  }
  postParam = Object.assign(postParam, param)
  postParam.fail = postParam.error
  if (postParam.url) wx.request(postParam)
 })
}

module.exports = {
 get(url, data, param){
  return request(url, data={}, param={}, method='GET')
 },
 
 post(){
  return request.apply(null, arguments)
 }
}

位置服务方法

需要开通小程序的位置服务功能,在小程序控制台

小程序如何定位所在城市及发起周边搜索

简单的封装了三个位置服务的方法

  • 所在地城市
  • 地区搜索
  • 范围搜索
// request的promise封装
const iKit = request('./rq.js') 

// key为开通位置服务所获取的查询值
// 下面这个key是随便写的
let key = 'JKDBZ-XZVLW-IAQR8-OROZ1-XR3G9-UYBD5'

/*
 * 搜索地区... 
 * 搜索地区的商圈, 如搜索 kfc 广州市
 * key {String} 搜索内容 
 * region {String} 搜索区域 
*/
export function searchRegion(kw, region) {
 let opts = {
  keyword: encodeURI(kw),
  boundary: region ? `region(${encodeURI(region)}, 0)` : '', // 0 为限定范围搜搜索,1为开放范围搜素偶
  page_size: 10, // 搜索结果分页最大条数
  page_index: 1, // 指定分页
  key
 }

 return new Promise((resolve, rej)=>{
  iKit.get('https://apis.map.qq.com/ws/place/v1/search', opts).then(res=>{
   resolve(res.data.data)
  })
 })
}

/*
 * 搜索附近的... 
 * 以当前位置的经纬度搜索附近商圈,如附近的酒店,快餐等等
 * key {String} 搜索内容 
 * params {Object} 搜索参数 包含三个参数 lat纬度,lng经度,distance范围(单位米) 
*/
export function searchCircle(kw, params={}) {
 let {lat, lng, distance} = params
 if (!lat && !lng) return 
 if (!distance) distance = 1000 // 搜索范围默认1000米
 let opts = {
  keyword: encodeURI(kw),
  boundary: `nearby(${lat},${lng},${distance})`,
  orderby: '_distance', // 范围搜索支持排序,由近及远 
  page_size: 20, // 搜索结果分页最大条数 
  page_index: 1, // 指定分页 
  key
 }

 return new Promise((resolve, rej)=>{
  iKit.get('https://apis.map.qq.com/ws/place/v1/search', opts).then(res=>{
   resolve(res.data.data)
  })
 })
}

// 所在地的城市,省份等区域信息
/*
 * 所在地的城市,省份等区域信息 
 * 如当前地址所在省份、城市 
 * lat {Number} 纬度
 * lng {Number} 经度 
*/
export function myCity(lat, lng) {
 return new Promise((resolve, rej)=>{
  let opts = {
   location: `${lat},${lng}`,
   key
  }
  
  iKit.get(`https://apis.map.qq.com/ws/geocoder/v1/`, opts).then(res => {
   resolve(res.data.result)
  })
 })
}

调用

wx.getLocation({
  type: 'wgs84',
  success(location) {
   locationPosition = location
   
   // 所在地信息
   myCity(location.latitude, location.longitude).then(res => {
    let myCityInfo = res.ad_info
    let {city, nation, province, city_code, adcode} = myCityInfo
    console.log({title: `国家: ${nation},省份: ${province},城市: ${city}`})
   })
   
   // 附近搜索
   searchCircle('快餐', {
    lat: location.latitude,
    lng: location.longitude,
    distance: 500
   }).then(res=>{
    console.log(res)
   })
   
   // 地区搜索
   searchRegion('酒店', '广州').then(res=>{
    console.log(res)
   })
  }
})

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
json格式化/压缩工具 Chrome插件扩展版
May 25 Javascript
简单常用的幻灯片播放实现代码
Sep 25 Javascript
jquery自动切换tabs选项卡的具体实现
Dec 24 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
Aug 01 Javascript
js对象的复制继承实例
Jan 10 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
基于Require.js使用方法(总结)
Oct 26 Javascript
浅谈Webpack下多环境配置的思路
Jun 27 Javascript
JavaScript笛卡尔积超简单实现算法示例
Jul 30 Javascript
vue.js编译时给生成的文件增加版本号
Sep 17 Javascript
vue插件draggable实现拖拽移动图片顺序
Dec 01 Javascript
JS+DIV实现拖动效果
Feb 11 #Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
Feb 11 #Javascript
原生js拖拽实现图形伸缩效果
Feb 10 #Javascript
js实现单元格拖拽效果
Feb 10 #Javascript
详解Vue template 如何支持多个根结点
Feb 10 #Javascript
JavaScript canvas动画实现时钟效果
Feb 10 #Javascript
JavaScript canvas仿代码流瀑布
Feb 10 #Javascript
You might like
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
深入PHP curl参数的详解
2013/06/17 PHP
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
JS实现从网页顶部掉下弹出层效果的方法
2015/08/06 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
2017/08/04 Javascript
vue组件与复用详解
2018/04/08 Javascript
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
JS图片懒加载技术实现过程解析
2020/07/27 Javascript
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
python集合用法实例分析
2015/05/30 Python
Python简单连接MongoDB数据库的方法
2016/03/15 Python
Tensorflow简单验证码识别应用
2017/05/25 Python
Python 中Pickle库的使用详解
2018/02/24 Python
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
解决python3 网络请求路径包含中文的问题
2018/05/10 Python
详解python项目实战:模拟登陆CSDN
2019/04/04 Python
python爬虫selenium和phantomJs使用方法解析
2019/08/08 Python
如何通过python实现人脸识别验证
2020/01/17 Python
浅析Python requests 模块
2020/10/09 Python
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
SQL中where和having的区别
2012/06/17 面试题
英语文学专业学生的自我评价
2013/10/31 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
班主任开场白
2015/06/01 职场文书
在校学生证明格式
2015/06/24 职场文书
2016入党培训心得体会范文
2016/01/08 职场文书
解析CSS 提取图片主题色功能(小技巧)
2021/05/12 HTML / CSS