在微信小程序里自动获得当前手机所在的经纬度并转换成地址

简介:

效果:我在手机上打开微信小程序,自动显示出我当前所在的地理位置:

具体步骤:

1. 使用微信jssdk提供的getLocation API拿到经纬度;

2. 调用高德地图的api使用经纬度去换取地址的文字描述。


wx.ready(() => {

wx.getLocation({

type: "gcj02",

success: function(res) {

var location =

"&location=" + res.longitude + "," + res.latitude;

ReservationService.getGeocode(location).then(response => {

if (

response.data.status === "1" &&

response.data.info === "OK"

) {

self.country =

response.data.regeocode.addressComponent.country;

self.city = response.data.regeocode.addressComponent.city;

var express =

"/" +

self.country +

"|" +

response.data.regeocode.addressComponent.province +

"|" +

self.city +

"|" +

response.data.regeocode.addressComponent.district +

"|" +

response.data.regeocode.addressComponent.township +

"/g";

self.address = response.data.regeocode.formatted_address.replace(

eval(express),

""

);

} else {

// get location error, plz input address

alert("无法获取地址信息,请稍后再试");

}

});

}

});

ReservationService.getGeocode的实现:

getGeocode(location) {

const key = '此处填入您高德地图app的key';

return axios.post('https://restapi.amap.com/v3/geocode/regeo?key=' + key + location);

}

看下面一个使用高德地图API将经纬度转换成文字描述的地址的例子,使用postman发送请求:

API响应:


{

"status": "1",

"regeocode": {

"addressComponent": {

"city": [],

"province": "北京市",

"adcode": "110101",

"district": "东城区",

"towncode": "110101001000",

"streetNumber": {

"number": "44号",

"location": "116.39795,39.9097239",

"direction": "东北",

"distance": "117.874",

"street": "广场东侧路"

},

"country": "中国",

"township": "东华门街道",

"businessAreas": [

{

"location": "116.3998109423077,39.90717459615385",

"name": "天安门",

"id": "110101"

},

{

"location": "116.39981058278138,39.92383706953642",

"name": "景山",

"id": "110101"

},

{

"location": "116.4118112683418,39.91461494422115",

"name": "王府井",

"id": "110101"

}

],

"building": {

"name": "天安门",

"type": "风景名胜;风景名胜相关;旅游景点"

},

"neighborhood": {

"name": [],

"type": []

},

"citycode": "010"

},

"formatted_address": "北京市东城区东华门街道天安门"

},

"info": "OK",

"infocode": "10000"

}

要获取更多Jerry的原创文章,请关注公众号"汪子熙":

相关文章
|
2月前
|
小程序 Devops 开发工具
支付宝小程序入门学习之一:如何创建支付宝小程序并在手机上预览
支付宝小程序入门学习之一:如何创建支付宝小程序并在手机上预览
32 0
|
4月前
|
存储 JSON JavaScript
前后端分离项目知识汇总(微信扫码登录,手机验证码登录,JWT)-1
前后端分离项目知识汇总(微信扫码登录,手机验证码登录,JWT)
67 0
|
1月前
|
网络协议 JavaScript 前端开发
使用正则表达式验证身份证号、QQ号、手机号、邮箱、地址、邮编、银行卡号、学号、车牌号、快递单号、验证码、ISBN号、网址、IPV4地址、IPV6地址、出生年月日、姓名2
使用正则表达式验证身份证号、QQ号、手机号、邮箱、地址、邮编、银行卡号、学号、车牌号、快递单号、验证码、ISBN号、网址、IPV4地址、IPV6地址、出生年月日、姓名
362 0
|
6月前
|
小程序 JavaScript API
uniapp微信小程序获取用户手机号
uniapp微信小程序获取用户手机号
162 0
|
5月前
|
Web App开发 Linux Android开发
Chrome谷歌浏览器的WeChat微信模拟器,既可以设置模拟很多型号的手机设备Mozilla
Chrome谷歌浏览器的WeChat微信模拟器,既可以设置模拟很多型号的手机设备Mozilla
|
6月前
|
JSON 前端开发 安全
前后端分离项目知识汇总(微信扫码登录,手机验证码登录,JWT)-2
前后端分离项目知识汇总(微信扫码登录,手机验证码登录,JWT)
41 0
|
4月前
|
JSON 前端开发 安全
前后端分离项目知识汇总(微信扫码登录,手机验证码登录,JWT)-2
前后端分离项目知识汇总(微信扫码登录,手机验证码登录,JWT)
58 0
|
4月前
|
小程序 前端开发 JavaScript
前端Uni-app开发微信小程序|微信小程序手机商城
前端Uni-app开发微信小程序|微信小程序手机商城
|
5月前
|
小程序 前端开发 JavaScript
前端Uni-app开发微信小程序|微信小程序手机商城
前端Uni-app开发微信小程序|微信小程序手机商城
|
5月前
|
小程序 算法 数据安全/隐私保护
小程序获取用户手机号
小程序获取用户手机号

热门文章

最新文章