uni.getLocation+腾讯地图获取位置信息（uniapp)

一、打开网页搜索“腾讯位置服务”，地址：https://lbs.qq.com/

1、注册/登陆后，点击控制台，找到我的应用

2、创建应用（右上角）

3、根据要求填写名称，选择类型即可，填写完毕点击创建

4、在列表里找到创建的应用，点击添加key

5、如下图，框选部分为必填，必选。描述可根据提示进行填写

appId获取：微信公众平台，地址：https://mp.weixin.qq.com/

如已有账号：登陆后，找到左侧菜单的开发管理点击进入，右侧找到开发管理，复制appId，粘贴到腾讯位置服务即可

（没有注册过的就注册一下，但是注意不要注册成测试号，测试号是没有appId的）

6、“此key每日调用量以达到上限”（踩坑）

这是下载sdk后直接使用出现的问题，只请求了几次位置就不能用了，后来在网上搜索发现是没有配置次数，具体操作如下

①、在左侧菜单找到配额管理->账户额度，点击操作里的配额查看（不是只给定位配额，我就是多圈了一下，最好每一个接口都配置一下）

②、点击之后会出现下图

③、选择应用和Key，配额分配的调用量和并发量在最高额度内就可以，配置后提交（其他的配额也一样操作）

7、进入腾讯位置服务开发文档，下载JavaScriptSDK（版本自选）点击下载。地址：微信小程序JavaScript SDK | 腾讯位置服务

8、下载后解压到需要使用该服务的项目中，可以在根路径下创建目录common，将下载的JavaScriptSDK解压到该目录下

9、进入微信公众平台，找到左侧菜单的开发管理点击进入，右侧找到开发管理，下滑找到服务器域名点击修改，验证身份后进行修改

9、打开HBuilder X，打开项目，找到manifest.json文件->微信小程序配置->勾选位置接口，填写申请原因（必填!)

（描述肯定写的官方一些，我就自己看，随便写的）

10、下滑找到源码视图，看是否有图中框选部分，没有就手动添加一下

11、在根目录下，创建一个minxin文件，文件夹里新建一个position.js文件

在position.js里粘贴如下代码

//获取用户实时位置
import QQMapWX from "@/common/qqmap-wx-jssdk.js"
export const showMixin = {
	data() {
		return {
			show: true
		}
	},
	methods: {
		showto() {
			this.show = !this.show
			console.log('this.show', this.show)
			uni.navigateBack({
				delta: 1
			})
		},
		async getLocationInfo() {
			return new Promise((resolve) => {
				let location = {
					longitude: 0,
					latitude: 0,
					province: "",
					city: "",
					area: "",
					street: "",
					address: "",
				};
				uni.getLocation({
					type: "gcj02",
					success(res) {
						location.longitude = res.longitude;
						location.latitude = res.latitude;

						const qqmapsdk = new QQMapWX({
							key: 'QZ2BZ-VVDC5-3NWIU-IY5LW-EHJGF-7ABAH'
						});
						qqmapsdk.reverseGeocoder({
							location,
							success(response) {
								let info = response.result;
								console.log(info);
								location.province = info.address_component.province;
								location.city = info.address_component.city;
								location.area = info.address_component.district;
								location.street = info.address_component.street;
								location.address = info.address;
								resolve(location);
							}
						});
					},
					fail(err) {
						console.log(err)
					}
				})
			})
		}
	}
}

12、在vue页面使用时，如下图

<template>
	<view class="site">
		<view class="current">
			<view style="display: flex; font-size: 28rpx; line-height: 44rpx;">
				<uni-icons type="location" size="20"></uni-icons>
				<txte v-if="position !== null">当前位置：{{position}}</txte>
			</view>
		</view>
	</view>
</template>

<script>
	import {showMixin} from '@/mixins/position.js'
	export default {
		mixins: [showMixin],
		data() {
			return {
				position: null,
			}
		},
		async mounted() {
			const location = await this.getLocationInfo();
			console.log('location', location)
			let position = location.province + location.city + location.area
			this.position = position
		},
		methods: {},
	}
</script>

<style lang="less" scoped>
	.current {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100vw;
		height: 100rpx;
		padding: 0 30rpx;
	}

	.site {
		width: 100vw;
		height: 100vh;
		background-color: #fff;
	}
</style>

13、运行到微信开发者工具

当然，获取到的内容不止这些，可以查看Network，然后选择自己需要的就可以了