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


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 相关文章推荐
javascript:以前写的xmlhttp池,代码
May 18 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
Apr 25 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
Knockout数组(observable)使用详解示例
Nov 15 Javascript
JQUERY dialog的用法详细解析
Dec 19 Javascript
javascript删除数组元素并且数组长度减小的简单实例
Feb 14 Javascript
Javascript解析URL方法详解
Dec 05 Javascript
js实现简单秒表走动的时钟特效
Mar 25 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
基于JS实现移动端左滑删除功能
Jul 28 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 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/12/06 PHP
PHP实现阳历到农历转换的类实例
2015/03/07 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
JS类的封装及实现代码
2009/12/02 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
loading动画特效小结
2017/01/22 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
2017/12/28 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
2018/07/28 Javascript
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python的Django框架中if标签的相关使用
2015/07/15 Python
详解python3实现的web端json通信协议
2016/12/29 Python
Python中异常重试的解决方案详解
2017/05/05 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
pandas的resample重采样的使用
2020/04/24 Python
Python参数传递及收集机制原理解析
2020/06/05 Python
keras load model时出现Missing Layer错误的解决方式
2020/06/11 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
python中pyqtgraph知识点总结
2021/01/26 Python
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
英国儿童图书网站:Scholastic
2017/03/26 全球购物
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
大学自主招生推荐信
2014/05/10 职场文书
客户答谢会活动方案
2014/08/31 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书
安全责任书
2015/01/29 职场文书
2015年组织部工作总结
2015/04/03 职场文书
学校教师师德师风承诺书
2015/04/28 职场文书
三八节活动简报
2015/07/20 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
2016小学教师读书心得体会
2016/01/13 职场文书
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB