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


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 实用小技巧
Apr 07 Javascript
HTML中的setCapture和releaseCapture使用介绍
Mar 21 Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 Javascript
JavaScript File分段上传
Mar 10 Javascript
微信JSAPI支付操作需要注意的细节
Jan 10 Javascript
package.json文件配置详解
Jun 15 Javascript
JavaScript生成简单等差数列
Nov 28 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
Jun 04 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
vue router总结 $router和$route及router与 router与route区别
Jul 05 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 Javascript
关于AngularJS中几种Providers的区别总结
May 17 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
咖啡语言
2021/03/03 咖啡文化
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
php常用的url处理函数总结
2014/11/19 PHP
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
php经典趣味算法实例代码
2020/01/21 PHP
window.showModalDialog使用手册
2007/01/11 Javascript
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
2016/10/31 Javascript
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
在vue使用clipboard.js进行一键复制文本的实现示例
2019/01/15 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
利用Pytorch实现简单的线性回归算法
2020/01/15 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
python实例化对象的具体方法
2020/06/17 Python
Django多个app urls配置代码实例
2020/11/26 Python
H5离线存储Manifest原理及使用
2020/04/28 HTML / CSS
抽象类和接口的区别
2012/09/19 面试题
毕业学生推荐信
2013/12/01 职场文书
运动会表扬稿大全
2014/01/16 职场文书
《守株待兔》教学反思
2014/03/01 职场文书
餐饮总经理岗位职责
2014/03/07 职场文书
个人授权委托书格式
2014/08/30 职场文书
2014年基建工作总结
2014/12/12 职场文书
出纳岗位职责
2015/01/31 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
服装店员工管理制度
2015/08/07 职场文书
2016年大学迎新晚会工作总结
2015/10/15 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
python实现简易名片管理系统
2021/04/11 Python
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android