当前位置：首页 > news >正文

uniapp中腾讯地图SDK-安装及配置（自动定位回显城市）

news 2025/7/20 8:56:41

注：前置处理参考文档： https://blog.csdn.net/cherishSpring/article/details/149462101

1、腾讯位置服务文档：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

2、安装qqmap-wx-jssdk.js：https://www.npmjs.com/package/qqmap-wx-jssdk

//注意taobao镜像已经不能使用了，npm需要重新设置个镜像
npm install qqmap-wx-jssdk --save

3、注册腾讯位置服务注册账号key：https://lbs.qq.com/login/register/index.html

4、配额分配，不分配调用不了

5、腾讯地图API-逆地址解析[qqmapsdk.reverseGeocoder]和[uni.getLocation]配合自动定位

API接口参考：

https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodReverseGeocoder

https://uniapp.dcloud.net.cn/api/location/location.html#getlocation

效果图：

调用代码，通过uni.getLocation获取经纬度再逆地址解析qqmapsdk.reverseGeocoder得到位置名称

<template><view class="homePage"><u-icon size="12" name="arrow-down" :label="address" labelPos="left" @click="citySelect()"></u-icon></view>
</template><script>import QQMapWX from "qqmap-wx-jssdk";let qqmapsdk;export default {data() {return {address: "选择城市"}},onLoad() {qqmapsdk = new QQMapWX({key: this.QQ_MAP_KEY});this.getLocation();},methods: {getLocation() {uni.getLocation({type: 'wgs84', // 返回可以用于uni.openLocation的经纬度，默认为wgs84的gps坐标success: (res) => {console.log(JSON.stringify(res, 2))this.reverseGeocoder(res);},fail: (err) => {console.error('获取位置失败：', err);}});},reverseGeocoder(data) {qqmapsdk.reverseGeocoder({coord_type: 5, //[默认]腾讯、google、高德坐标location: data,success: (res) => {let addr=res.result.address;this.address = addr.substring(0,2);console.log(this.address);},fail: (err) => {console.error('reverseGeocoder失败：', err);}});}}};
</script><style>page {height: 100%;background: white;}.homePage {padding-bottom: 5px;}
</style>

逆地址解析res结果

{  "status": 0,  "message": "query ok",  "request_id": "91279b6f-c398-4903-9d2c-878c9594b7cc",  "result": {  "location": {  "lat": 29.56471,  "lng": 106.55073  },  "address": "重庆市渝中区人民支路96-5号",  "formatted_addresses": {  "recommend": "渝中区上清寺重庆市财政税务局住宅(中山四路东)",  "rough": "渝中区上清寺重庆市财政税务局住宅(中山四路东)",  "standard_address": "重庆市渝中区人民支路96"  },  "address_component": {  "nation": "中国",  "province": "重庆市",  "city": "重庆市",  "district": "渝中区",  "street": "人民支路",  "street_number": "人民支路96-5号"  },  "ad_info": {  "nation_code": "156",  "adcode": "500103",  "phone_area_code": "023",  "city_code": "156500000",  "name": "中国,重庆市,重庆市,渝中区",  "location": {  "lat": 29.552631,  "lng": 106.568914  },  "nation": "中国",  "province": "重庆市",  "city": "重庆市",  "district": "渝中区"  },  "address_reference": {  "business_area": {  "id": "6871151327198599787",  "title": "上清寺",  "location": {  "lat": 29.5606,  "lng": 106.546  },  "_distance": 0,  "_dir_desc": "内"  },  "famous_area": {  "id": "6871151327198599787",  "title": "上清寺",  "location": {  "lat": 29.5606,  "lng": 106.546  },  "_distance": 0,  "_dir_desc": "内"  },  "crossroad": {  "id": "622857",  "title": "人民路/蒲草田(路口)",  "location": {  "lat": 29.56287,  "lng": 106.55495  },  "_distance": 451.1,  "_dir_desc": "西北"  },  "town": {  "id": "500103005",  "title": "上清寺街道",  "location": {  "lat": 29.559856,  "lng": 106.548003  },  "_distance": 0,  "_dir_desc": "内"  },  "street_number": {  "id": "4446242921655447310160",  "title": "人民支路96-5号",  "location": {  "lat": 29.56463,  "lng": 106.55067  },  "_distance": 10.6  },  "street": {  "id": "17284759988724730050",  "title": "中山四路",  "location": {  "lat": 29.563307,  "lng": 106.547394  },  "_distance": 35.1,  "_dir_desc": "东"  },  "landmark_l2": {  "id": "14916175664193811825",  "title": "重庆市财政税务局住宅",  "location": {  "lat": 29.564787,  "lng": 106.550805  },  "_distance": 0,  "_dir_desc": "内"  }  }  }  
}

查看全文

http://www.dtcms.com/a/287942.html