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

注：前置处理参考文档： 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

bash 复制代码

//注意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得到位置名称

html 复制代码

<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结果

javascript 复制代码

{  
    "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": "内"  
            }  
        }  
    }  
}