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


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公告滚动+AJAX后台得到数据
Apr 14 Javascript
jquery弹出框的用法示例(一)
Aug 26 Javascript
JavaScript中property和attribute的区别详细介绍
Mar 03 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
Aug 28 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
javascript css红色经典选项卡效果实现代码
May 17 Javascript
JavaScript中undefined和null的区别
May 03 Javascript
Underscore之Array_动力节点Java学院整理
Jul 10 Javascript
JS实现前端缓存的方法
Sep 21 Javascript
基于jquery.page.js实现分页效果
Jan 01 jQuery
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 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实现mysql同步的实现方法
2009/10/21 PHP
PHP5 的对象赋值机制介绍
2011/08/02 PHP
PHP处理excel cvs表格的方法实例介绍
2013/05/13 PHP
php过滤所有恶意字符(批量过滤post,get敏感数据)
2014/03/18 PHP
php实现Linux服务器木马排查及加固功能
2014/12/29 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
jQuery替换字符串(实例代码)
2013/11/13 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
AngularJS基础 ng-model 指令详解及示例代码
2016/08/02 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
利用js的闭包原理做对象封装及调用方法
2017/04/07 Javascript
前端页面文件拖拽上传模块js代码示例
2017/05/19 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
python逐行读取文件内容的三种方法
2014/01/20 Python
浅谈Python数据类型之间的转换
2016/06/08 Python
详解python的ORM中Pony用法
2018/02/09 Python
python3实现mysql导出excel的方法
2019/07/31 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
python中元组的用法整理
2020/06/15 Python
python import 上级目录的导入
2020/11/03 Python
业务副厂长岗位职责
2014/01/03 职场文书
音乐教师求职信
2014/06/28 职场文书
项目工作说明书
2014/07/29 职场文书
见习报告的格式
2014/11/04 职场文书
2014年教学工作总结
2014/11/13 职场文书
校车司机安全责任书
2015/05/11 职场文书
Python中的xlrd模块使用整理
2021/06/15 Python
OpenFeign实现远程调用
2022/08/14 Java/Android