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

2018-02-22 10:35:18
前言

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

实现方法

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

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

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

full screen


腾讯地图WebServiceAPI



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

full screen


逆地址解析



逆地址解析提供由坐标到坐标所在位置的文字描述的转换,调用形式就是一个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>



运行结果如下所示:

full screen


运行结果

总结

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



您可能感兴趣的文章:微信小程序 获取设备信息 API实例详解微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决微信小程序 解决请求服务器手机预览请求不到数据的方法C#微信小程序服务端获取用户解密信息实例代码微信小程序 判断手机号的实现代码微信小程序授权获取用户详细信息openid的实例详解微信小程序getPhoneNumber获取用户手机号微信小程序获取手机号授权用户登录功能微信小程序实现添加手机联系人功能示例微信小程序获取手机系统信息的方法【附源码下载】

source:
http://www.jb51.net/article/113842.htm


-------------------------

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

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

-------------------------

[14056]取当前所有的拨号连接的程式

2017-12-13 00:07:36
{+++++++++++++++++++++++ 取当前所有的拨号连接的程式; 参数为传入的列表,过程成功为参数付值且返回值为真 否则为假; 调用方法类似 if GetEntries(Memo1.Lines) then begin...    阅读全文

-------------------------

[7150]PHP中TP5上传文件的实例详解

2018-03-04 07:08:31
php 文件上传效果图:实现代码:applicationindexcontrollerIndex.php[pre]&lt;&#63;php...    阅读全文

-------------------------

[4402]中韩关系“复位”的逻辑:合适定位的基础上增强互信合作

2017-12-14 08:47:37
  【环球时报综合报道】韩国总统文在寅昨天开始对中国进行国事访问,多方认为这是一次&ldquo;修补篱笆之旅&rdquo;,过去一年多来,因韩国部署&ldquo;萨德&rdquo;导致中韩遭遇建交25年来最严重的外...    阅读全文

-------------------------

[4024]java如何实现判断文件的真实类型

2018-03-03 17:52:24
在文件传输过程中,为了安全验证,对于手工改动文件后缀名产生的伪造文件进行判断过滤。比如,我们需要的是excel文件,如果不加验证内容,将一些可执行的文件通过更改后缀传输给你,就是一个很...    阅读全文

-------------------------

[3695]JavaScript实现把数字转换成中文

2018-02-22 08:11:31
[pre]var _change = {ary0:[零, 一, 二, 三, 四, 五, 六, 七, 八, 九],ary1:[, 十, 百, 千],ary2:[, 万, 亿, 兆],init:function (name) {this.nam...    阅读全文

-------------------------

[3643]PHP实现把数字ID转字母ID

2018-02-20 23:52:16
ID是网站中经常出现的,它一般是数字,但是我们发现现在的网站很多ID都是字母了,比如YouTube的视频播放页它的URL类似/watch?v=yzNjIBEdyww。 下面是一个生成字母ID的方法。使用示例:复制代码...    阅读全文

-------------------------

[2922]现金贷APP上借个款?你想象不到他们可以掌握你多少信息、扒你多少老底!

2018-01-28 05:10:08
原标题:现金贷APP上借个款?你想象不到他们可以掌握你多少信息、扒你多少老底! 大家喜爱的愉见财经特邀作者、在现金贷平台从业的“visi同学”,又来爆料了。身在行业、接触借款人,自...    阅读全文

-------------------------

[2781]匪夷所思!一个中学生课上开了个玩笑,就能震动整个国家

2018-02-25 05:42:28
  昨天,在一个地球上最强大的国家,一名这个国家的中学生在课堂上开了一个小玩笑。但令他万万没想到的是,他的这个玩笑不仅吓坏了警察,更给他招致了被学校开除的厄运,甚至还惊动了整个国家&hel...    阅读全文

-------------------------

[2692]英媒:索罗斯在达沃斯炮轰“黑帮国家”与科技巨头

2018-01-28 05:04:25
周四,乔治索罗斯(George Soros)在达沃斯(Davos)发表了直言不讳的讲话,他抱怨了俄罗斯等“黑帮国家”的崛起,以及Facebook和谷歌(Google)对创新带来的威胁。在世界经济论坛(WEF)的年度索罗斯晚宴...    阅读全文

-------------------------

[2659]专家对比中美俄五代机:歼20实现“能打”进度快

2018-02-17 22:59:26
  专家分析中美俄隐身战机:歼20实现&ldquo;能打&rdquo;进度快  人民网北京2月12日...    阅读全文



Copyright 2002-2017, 版权所有 mwjx.com