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


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 相关文章推荐
JavaScript 学习笔记一些小技巧
Mar 28 Javascript
js移除事件 js绑定事件实例应用
Nov 28 Javascript
Javascript中自动切换焦点实现代码
Dec 15 Javascript
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
JavaScript获取当前网页标题(title)的方法
Apr 03 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
JavaScript中解析JSON数据的三种方法
Jul 03 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
js实现带搜索功能的下拉框
Jan 11 Javascript
React倒计时功能实现代码——解耦通用
Sep 18 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
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
PHP模板引擎Smarty的缓存使用总结
2014/04/24 PHP
Laravel框架中扩展函数、扩展自定义类的方法
2014/09/04 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
css图片自适应大小
2007/11/28 Javascript
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
javascript 弹出层组件(升级版)
2011/05/12 Javascript
推荐10个超棒的jQuery工具提示插件
2011/10/11 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
如何在Linux上安装Node.js
2016/04/01 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
Javascript Dom元素获取和添加详解
2019/09/24 Javascript
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
实例详解Python模块decimal
2019/06/26 Python
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
Django模板语言 Tags使用详解
2019/09/09 Python
Python 找出出现次数超过数组长度一半的元素实例
2020/05/11 Python
python中执行smtplib失败的处理方法
2020/07/01 Python
Django websocket原理及功能实现代码
2020/11/14 Python
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
Golang二维切片初始化的实现
2021/04/08 Golang
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js
5个实用的JavaScript新特性
2022/06/16 Javascript
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS