uniapp 微信小程序配合腾讯地地图定位

先解释一下为什么要用腾讯地图实现定位

原因：uniapp可以通过uni.getLocation获取用户定位，但是获取到的定位没有中文地址，所以我们需要通过第三方SDK例如高德地图或者腾讯地图来获取中文定位信息。

先去腾讯位置服务 :腾讯位置服务 - 立足生态，连接未来

去控制台 应用管理-->我的应用-->创建应用--->添加key :如下图

 之后去开发文档下载地图小程序SDK:

 下载依赖包 ,解压后引入到文件中

 引入到代码里

<template>
	<view>
		<map :latitude="latitude" :longitude="longitude" show-compass="true" show-location="true" class="map"></map>
	</view>
</template>

<script>
	import qqmapsdk from '../../static/qqmap-wx-jssdk.js' //引入下载的js
	const QQMapWX = new qqmapsdk({
		key: 'VNBBZ-SKMRW-U5TR5-OIYQZ-VEOMF-IABLP'    //之前在腾讯位置服务添加的key
	});

	export default {
		data() {
			return {
				latitude: 0,
				longitude: 0,
			}
		},
		onLoad() {
			uni.getLocation({
				type: 'wgs84',
				geocode: true,
				success: (res) => {
					console.log("获取经纬度成功");
					this.latitude = res.latitude;
					this.longitude = res.longitude;
				},
				fail: () => {
					console.log("获取经纬度失败");
				},
				complete: () => {
					// 解析地址
					QQMapWX.reverseGeocoder({
						location: {
							latitude: this.latitude,
							longitude: this.longitude
						},
						success: function(res) {
							console.log("解析地址成功");
							console.log(res);
							// 省
							let province = res.result.ad_info.province;
							// 市
							let city = res.result.ad_info.city;
							console.log(province);
							console.log(city);
						},
						fail: function(res) {
							uni.showToast({
								title: '定位失败',
								duration: 2000,
								icon: "none"
							})
							console.log(res);
						},
						complete: function(res) {
							console.log(res);
						}
					})
				}
			})
		},
		methods: {

		}
	}
</script>

<style>
	.map {
		width: 100vw;
		height: 100vh;
	}
</style>