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


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 相关文章推荐
JS实现图片预加载无需等待
Dec 21 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
Javascript获取当前日期的农历日期代码
Oct 08 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
nw.js实现类似微信的聊天软件
Mar 16 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
详解Vue2 SSR 缓存 Api 数据
Nov 20 Javascript
webpack多页面开发实践
Dec 18 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
Jun 11 Javascript
layer.alert自定义关闭回调事件的方法
Sep 27 Javascript
通过JS判断网页是否为手机打开
Oct 28 Javascript
jquery实现点击左右按钮切换图片
Jan 27 jQuery
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
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
2010/06/19 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
Extjs NumberField后面加单位实现思路
2013/07/30 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
DIV始终居中的js代码
2014/02/17 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
2016/11/28 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
2017/03/10 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
Django使用多数据库的方法
2017/09/06 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
Vue列表渲染的示例代码
2018/11/01 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
vue - props 声明数组和对象操作
2020/07/30 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
python创建进程fork用法
2015/06/04 Python
Python向Excel中插入图片的简单实现方法
2018/04/24 Python
Python3 JSON编码解码方法详解
2019/09/06 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
python3 简单实现组合设计模式
2020/07/02 Python
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
大学毕业生的自我鉴定
2013/11/30 职场文书
大学生关于奋斗的演讲稿
2014/01/09 职场文书
信息技术教学反思
2014/02/12 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
环保倡议书300字
2014/05/15 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
中学生纪念九一八事变演讲稿
2014/09/14 职场文书
防灾减灾标语
2014/10/07 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android