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


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 相关文章推荐
ie和firefox不兼容的解决方法集合
Apr 28 Javascript
jQuery 工具函数学习资料
Apr 29 Javascript
写给想学习Javascript的朋友一点学习经验小结
Nov 23 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
清除div下面的所有标签的方法
Feb 17 Javascript
JavaScript获取Url里的参数
Dec 18 Javascript
微信小程序 自定义对话框实例详解
Jan 20 Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 Javascript
Webpack优化配置缩小文件搜索范围
Dec 25 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
什么时候不能在 Node.js 中使用 Lock Files
Jun 24 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 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字符串 ==比较运算符的副作用
2009/10/21 PHP
php通过ajax实现双击table修改内容
2014/04/28 PHP
php禁用cookie后session设置方法分析
2016/10/19 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
json跟xml的对比分析
2008/06/10 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
AngularJS内置指令
2015/02/04 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
js基本算法:冒泡排序,二分查找的简单实例
2016/10/08 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
vuex state及mapState的基础用法详解
2018/04/19 Javascript
JS实现简单的星期格式转换功能示例
2018/07/23 Javascript
JS栈stack类的实现与使用方法示例
2019/01/31 Javascript
怎样在vue项目下添加ESLint的方法
2019/05/16 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
Python连接SQLServer2000的方法详解
2017/04/19 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
python 实现调用子文件下的模块方法
2018/12/07 Python
Python使用Pandas对csv文件进行数据处理的方法
2019/08/01 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
django-orm F对象的使用 按照两个字段的和,乘积排序实例
2020/05/18 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
服装厂厂长岗位职责
2013/12/27 职场文书
函授教育个人学习的自我评价
2013/12/31 职场文书
消防安全管理制度
2014/02/01 职场文书
伏羲庙导游词
2015/02/09 职场文书
第二次离婚起诉书
2015/05/18 职场文书
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android