效果:我在手机上打开微信小程序,自动显示出我当前所在的地理位置:
具体步骤:
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的原创文章,请关注公众号"汪子熙":
相关推荐
sublime的微信小程序代码自动补全sublime的微信小程序代码自动补全sublime的微信小程序代码自动补全sublime的微信小程序代码自动补全sublime的微信小程序代码自动补全sublime的微信小程序代码自动补全sublime的微信...
微信小程序 小程序地图定位 (源码)微信小程序 小程序地图定位 (源码)微信小程序 小程序地图定位 (源码)微信小程序 小程序地图定位 (源码)微信小程序 小程序地图定位 (源码)微信小程序 小程序地图定位 (源码)微信小...
【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大...
微信小程序投票系统微信小程序云开发实现的...瀑布流展示,排名,活动发布等功能排名,活动发布等功能活动发布等功能微信小程序投票系统微信小程序云开发实现的投票微信小程序系统。瀑布流展示,排名,活动发布等功能
微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小程序 小程序官方Demo (源码)微信小...
微信小程序sublime开发工具-自动补全代码片段微信小程序sublime开发工具-自动补全代码片段微信小程序sublime开发工具-自动补全代码片段微信小程序sublime开发工具-自动补全代码片段微信小程序sublime开发工具-自动...
微信小程序 万年历 (源码)微信小程序 万年历 (源码)微信小程序 万年历 (源码)微信小程序 万年历 (源码)微信小程序 万年历 (源码)微信小程序 万年历 (源码)微信小程序 万年历 (源码)微信小程序 万年历 (源码)微信小...
微信小程序 商城 (源码)微信小程序 商城 (源码)微信小程序 商城 (源码)微信小程序 商城 (源码)微信小程序 商城 (源码)微信小程序 商城 (源码)微信小程序 商城 (源码)微信小程序 商城 (源码)微信小程序 商城 (源码)...
微信小程序:调起摄像头拍照并在页面预览图片 微信小程序:调起摄像头拍照并在页面预览图片 微信小程序:调起摄像头拍照并在页面预览图片 微信小程序:调起摄像头拍照并在页面预览图片 微信小程序:调起...
微信小程序 小程序页面生成器 (源码)微信小程序 小程序页面生成器 (源码)微信小程序 小程序页面生成器 (源码)微信小程序 小程序页面生成器 (源码)微信小程序 小程序页面生成器 (源码)微信小程序 小程序页面生成器 ...
【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大...
【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大...
微信小程序 小程序版2048 (源码)微信小程序 小程序版2048 (源码)微信小程序 小程序版2048 (源码)微信小程序 小程序版2048 (源码)微信小程序 小程序版2048 (源码)微信小程序 小程序版2048 (源码)微信小程序 小程序版...
【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大...
【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大...
【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大...
【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大...
微信小程序 电影推荐 (源码)微信小程序 电影推荐 (源码)微信小程序 电影推荐 (源码)微信小程序 电影推荐 (源码)微信小程序 电影推荐 (源码)微信小程序 电影推荐 (源码)微信小程序 电影推荐 (源码)微信小程序 电影...
【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大...
前端期末大作业毕业设计微信小程序商城系统源码 前端期末大作业毕业设计微信小程序商城系统源码 前端期末大作业毕业设计微信小程序商城系统源码 前端期末大作业毕业设计微信小程序商城系统源码 前端期末大作业毕业...