微信小程序城市定位的实现实例(获取当前所在国家城市信息)


Posted in Javascript onMay 17, 2017

前言

在微信小程序中,我们可以通过调用wx.getLocation()获取到设备当前的地理位置信息,这个信息是当前位置的经纬度。如果我们想获取当前位置是处于哪个国家,哪个城市等信息,该如何实现呢?

实现方法

微信小程序中并没有提供这样的API,但是没关系,有wx.getLocation()得到的经纬度作为基础就够了,其他的,我们可以使用其他第三方地图服务可以来实现,比如腾讯地图或百度地图的API。

以腾讯地图为例,我们可以去腾讯地图开放平台注册一个账号,然后在它的管理后台创建一个密钥(key)。

然后在顶部菜单里面,可以找到WebServiceAPI菜单:

微信小程序城市定位的实现实例(获取当前所在国家城市信息)
腾讯地图WebServiceAPI

腾讯地图提供了很多WebServiceAPI,比如按照地址获取经纬度,根据经纬度找地址,我们将要用到的就是根据经纬度找地址,也称作“逆地址解析”:

微信小程序城市定位的实现实例(获取当前所在国家城市信息)
逆地址解析

逆地址解析提供由坐标到坐标所在位置的文字描述的转换,调用形式就是一个HTTP URL形式的API,基本用法如下:

http://apis.map.qq.com/ws/geocoder/v1/?location=39.984154,116.307490&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77

这个URL的基本参数就是一个经纬度坐标地址。你可以将这个URL中的key换成你自己的key,直接在浏览器中查看,就能看到类似这样的结果,还可以根据传入不同的参数选项,得到更丰富的信息:

{
 "status": 0,
 "message": "query ok",
 "request_id": "6225548022856589453",
 "result": {
 "location": {
  "lat": 39.984154,
  "lng": 116.30749
 },
 "address": "北京市海淀区北四环西路66号彩和坊路",
 "formatted_addresses": {
  "recommend": "海淀区中关村彩和坊路中国技术交易大厦",
  "rough": "海淀区中关村彩和坊路中国技术交易大厦"
 },
 "address_component": {
  "nation": "中国",
  "province": "北京市",
  "city": "北京市",
  "district": "海淀区",
  "street": "彩和坊路",
  "street_number": "北四环西路66号"
 },
 "ad_info": {
  "adcode": "110108",
  "name": "中国,北京市,北京市,海淀区",
  "location": {
  "lat": 39.984154,
  "lng": 116.307487
  },
  "nation": "中国",
  "province": "北京市",
  "city": "北京市",
  "district": "海淀区"
 },
 "address_reference": {
  "business_area": {
  "title": "中关村",
  "location": {
   "lat": 39.984058,
   "lng": 116.307518
  },
  "_distance": 0,
  "_dir_desc": "内"
  },
  "famous_area": {
  "title": "中关村",
  "location": {
   "lat": 39.984058,
   "lng": 116.307518
  },
  "_distance": 0,
  "_dir_desc": "内"
  },
  "crossroad": {
  "title": "彩和坊路/北四环西路辅路(路口)",
  "location": {
   "lat": 39.985001,
   "lng": 116.308113
  },
  "_distance": 104.2,
  "_dir_desc": "西南"
  },
  "village": {
  "title": "稻香园北社区",
  "location": {
   "lat": 39.983269,
   "lng": 116.301979
  },
  "_distance": 480.1,
  "_dir_desc": "东"
  },
  "town": {
  "title": "海淀街道",
  "location": {
   "lat": 39.984154,
   "lng": 116.307487
  },
  "_distance": 0,
  "_dir_desc": "内"
  },
  "street_number": {
  "title": "北四环西路66号",
  "location": {
   "lat": 39.984119,
   "lng": 116.307503
  },
  "_distance": 6.9,
  "_dir_desc": ""
  },
  "street": {
  "title": "彩和坊路",
  "location": {
   "lat": 39.984154,
   "lng": 116.308098
  },
  "_distance": 49.1,
  "_dir_desc": "西"
  },
  "landmark_l1": {
  "title": "北京中关村创业大街",
  "location": {
   "lat": 39.984055,
   "lng": 116.306992
  },
  "_distance": 43.9,
  "_dir_desc": "东"
  },
  "landmark_l2": {
  "title": "中国技术交易大厦",
  "location": {
   "lat": 39.984154,
   "lng": 116.307487
  },
  "_distance": 0,
  "_dir_desc": "内"
  }
 }
 }
}

从这个API的返回结果中,我们可以看到它包含了我们想要的地址信息,如国家,城市,区等。

接下来,我们要在我们的代码中调用这个API。该API可以通过JSONP的方式调用,也可以在服务器端发起调用。我是在我自己的服务端中调用的,下面是我的代码,使用Node.js Express实现的,仅供参考:

// 服务调用地址:http://localhost:3000/lbs/location

router.get('/lbs/location', function (req, res, next) {
 let lat = req.query.latitude
 let lng = req.query.longitude

 request.get({
 uri: 'https://apis.map.qq.com/ws/geocoder/v1/',
 json: true,
 qs: {
 location: `${lat},${lng}`,
 key: '你的腾讯地图密钥key'
 }
 }, (err, response, data) => {
 if (response.statusCode === 200) {
 responseUtil.jsonSuccess(res, data)
 } else {
 responseUtil.jsonError(res, 10001, '')
 }
 })
})

然后,可以看一下在小程序端的Page代码:

Page({

 data: {
 address: {}
 },

 onLoad: function () {
 //获取当前经纬度信息
 wx.getLocation({
 success: ({latitude, longitude}) => {

 //调用后台API,获取地址信息
 wx.request({
  url: 'http://localhost:3000/lbs/location',

  data: {
  latitude: latitude,
  longitude: longitude
  },

  success: (res) => {
  let info = res.data.data.result.ad_info
  this.setData({ address: info })
  },

  fail: () => {
  },

  complete: () => {
  }
 })
 }
 })
 }

})

以及一个简单的小程序界面,用于显示这些地址信息:

<view>
 <view>{{address.nation}}</view>
 <view>{{address.city}}</view>
 <view>{{address.district}}</view>
</view>

运行结果如下所示:

微信小程序城市定位的实现实例(获取当前所在国家城市信息)
运行结果

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习微信小程序能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js函数般调用正则
Apr 08 Javascript
给Function做的OOP扩展
May 07 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
一个关于jqGrid使用的小例子(行按钮)
Nov 04 Javascript
原生javascript获取元素样式
Dec 31 Javascript
深入理解JavaScript中的对象
Jun 04 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
基于Jquery实现万圣节快乐特效
Nov 01 Javascript
AngularJS 2.0入门权威指南
Oct 08 Javascript
JS实现小球的弹性碰撞效果
Nov 11 Javascript
jquery 验证用户名是否重复代码实例
May 14 jQuery
ES6中new Function()语法及应用实例分析
Feb 19 Javascript
微信小程序如何获知用户运行小程序的场景教程
May 17 #Javascript
bootstrap轮播图示例代码分享
May 17 #Javascript
bootstrap警告框示例代码分享
May 17 #Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 #Javascript
Angular获取手机验证码实现移动端登录注册功能
May 17 #Javascript
原生JS实现层叠轮播图
May 17 #Javascript
JavaScript手风琴页面制作
May 17 #Javascript
You might like
一个php作的文本留言本的例子(二)
2006/10/09 PHP
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
PHP面向对象程序设计之接口的继承定义与用法详解
2018/12/20 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
收集的网上用的ajax之chat.js文件
2007/04/08 Javascript
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
JS 退出系统并跳转到登录界面的实现代码
2013/06/29 Javascript
node.js中的http.response.removeHeader方法使用说明
2014/12/14 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
python开发利器之ulipad的使用实践
2017/03/16 Python
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
如何用Python合并lmdb文件
2018/07/02 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
Django 路由控制的实现
2019/07/17 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
Python如何急速下载第三方库详解
2020/11/02 Python
python实现马丁策略的实例详解
2021/01/15 Python
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
最新的小工具和卓越的产品设计:Oh That Tech!
2019/08/07 全球购物
逻辑链路控制协议
2016/10/01 面试题
超市开业庆典策划方案
2014/05/14 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
2014副镇长民主生活会个人对照检查材料思想汇报
2014/09/30 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
群众路线查摆问题整改措施
2014/10/10 职场文书
春秋淹城导游词
2015/02/11 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android