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


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 相关文章推荐
jquery对象和DOM对象的区别介绍
Aug 09 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
Aug 19 Javascript
AngularJS实现路由实例
Feb 12 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
vue中slot(插槽)的介绍与使用
Nov 12 Javascript
vue中axios实现数据交互与跨域问题
May 12 Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 Javascript
使用Typescript和ES模块发布Node模块的方法
May 25 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
模拟xcopy的函数
2006/10/09 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
JS的反射问题
2010/04/07 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
fmt:formatDate的输出格式详解
2014/01/09 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
JS获取url参数、主域名的方法实例分析
2016/08/03 Javascript
基于jQuery的checkbox全选问题分析
2016/11/18 Javascript
node.js的事件机制
2017/02/08 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
jQuery 改变P标签文本值方法
2018/02/24 jQuery
实例分析vue循环列表动态数据的处理方法
2018/09/28 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
vue-router路由模式详解(小结)
2019/08/26 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
python3中的md5加密实例
2018/05/29 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
Python实现把类当做字典来访问
2019/12/16 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
python3处理word文档实例分析
2020/12/01 Python
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
澳大利亚家具和家居用品在线商店:Interiors Online
2018/03/05 全球购物
医学生毕业自我鉴定
2014/03/26 职场文书
检讨书范文
2015/01/27 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python
使用Apache Camel表达REST服务的方法
2022/06/10 Servers