【Uniapp】Uniapp 集成腾讯地图获取当前定位信息
作者:互联网
文章目录
【Uniapp】Uniapp 集成腾讯地图获取当前定位信息
同样的还有高德地图,百度地图等可以进行集成,由于保证通用性,这里我们使用的是腾讯地图,因为项目有可能是小程序或者公众号,直接使用腾讯的方便一点
首先腾讯地图开放平台注册账号,并创建一个项目,拿到对应的appKey
在项目的全局常量中加入两个属性,第一个是请求腾讯地图接口的根域名,第二个是上一步注册生成的Key
mapUrl: 'https://apis.map.qq.com',
mapKay: '你的Kay值',
在uniapp的页面中,增加一个方法
getLocation() {
that.$msg('定位刷新中');
uni.getLocation({
type: 'wgs84',
success: function (res) {
that.latitude = res.latitude;
that.longitude = res.longitude;
uni.request({
url: that.$config.mapUrl + '/ws/geocoder/v1/',
method: 'GET',
data: {
location: res.latitude + ',' + res.longitude,
key: that.$config.mapKay
},
success: function (res) {
let data = res.data;
if (data.status == 0) {
that.$msg('定位刷新成功');
that.currLocation = data.result.address_component;
} else {
console.log(data.message);
}
},
fail: function (err) {
that.$msg('获取定位失败');
console.log('地址解析失败' + err);
}
});
}
});
}
获取的结果示例,下课!
{
"status": 0,
"message": "query ok",
"request_id": "c9ba8680-964a-11ec-8444-b4055d566451",
"result": {
"location": {
"lat": 26.64702,
"lng": 106.63024
},
"address": "贵州省贵阳市观山湖区黔云路",
"formatted_addresses": {
"recommend": "观山湖区贵阳市政府(黔云路西)",
"rough": "观山湖区贵阳市政府(黔云路西)"
},
"address_component": {
"nation": "中国",
"province": "贵州省",
"city": "贵阳市",
"district": "观山湖区",
"street": "黔云路",
"street_number": "黔云路"
},
"ad_info": {
"nation_code": "156",
"adcode": "520115",
"city_code": "156520100",
"name": "中国,贵州省,贵阳市,观山湖区",
"location": {
"lat": 26.583042,
"lng": 106.598839
},
"nation": "中国",
"province": "贵州省",
"city": "贵阳市",
"district": "观山湖区"
},
"address_reference": {
"street_number": {
"id": "",
"title": "",
"location": {
"lat": 26.646906,
"lng": 106.630669
},
"_distance": 12,
"_dir_desc": "西"
},
"crossroad": {
"id": "1805183",
"title": "黔云路/梦草路(路口)",
"location": {
"lat": 26.648649,
"lng": 106.630409
},
"_distance": 176.6,
"_dir_desc": "南"
},
"town": {
"id": "520115406",
"title": "金华园社区服务中心",
"location": {
"lat": 26.653633,
"lng": 106.623955
},
"_distance": 0,
"_dir_desc": "内"
},
"street": {
"id": "6119267374065600232",
"title": "黔云路",
"location": {
"lat": 26.646906,
"lng": 106.630669
},
"_distance": 12,
"_dir_desc": "西"
},
"landmark_l2": {
"id": "6162998728074908706",
"title": "贵阳市政府",
"location": {
"lat": 26.646631,
"lng": 106.62822
},
"_distance": 0,
"_dir_desc": "内"
}
}
}
}
微信公众号
标签:集成,Uniapp,res,location,腾讯,lat,lng,id 来源: https://blog.csdn.net/qq_38762237/article/details/123142660