• uniapp小程序：使用uni.getLocation通过腾讯地图获取相关地址信息详情（超详细）

    先看运行结果：

    流程：

    1、在edge网页搜索腾讯位置服务

    搜索后点击这里

    已经有账号的就进行登录，没有账号的进行注册即可

    点击控制台：

    进去后点击成员管理---->我的应用---->创建应用

    输入相应的参数应用名称（随便写）和应用类型更具你的项目类型进行选择我选择了出行

    选择好后点击创建：

    创建好后点击添加key：

    打开微信小程序开发工具：

    这样就获取到了key：

    2、下载腾讯小程序JavaScriptJDK点击即可跳转

    微信小程序JavaScript SDK | 腾讯位置服务 (qq.com)

    下载其中一个都可以

    解压后放在common目录下皆可，如果没有common路面自己生成即可。

    3、安全域名设计

    在微信小程序后台小程序 (qq.com)​​​​​​

    添加request合法域名，添加apis.map.qq.com

    4、配置manifest.json文件

    1.  "permission" : {
    2.             "scope.userLocation" : {
    3.                 "desc" : "为了您更好的体验，请确认获取您的位置"
    4.             }
    5.         },
    6.         "requiredPrivateInfos" : [ "getLocation", "chooseLocation", "chooseAddress" ]

    5、引用代码演示

    我这里吧方法引入到mixins中

    1. //获取用户实时位置
    2. import QQMapWX from "../../common/qqmap-wx-jssdk.js"

    1. //获取用户实时位置
    2. import QQMapWX from "../../common/qqmap-wx-jssdk.js"
    3. export const showMixin ={
    4. 	data(){
    5. 		return{
    6. 			show: true
    7. 		}
    8. 	},
    9. 	methods:{
    10. 		showto(){
    11. 			this.show=!this.show
    12. 			console.log('this.show',this.show)
    13. 			uni.navigateBack({
    14. 				delta:1
    15. 			})
    16. 			
    17. 		},
    18. 		async getLocationInfo() {
    19. 			// this.show = !this.show
    20. 			return new Promise((resolve) => {
    21. 				let location = {
    22. 					longitude: 0,
    23. 					latitude: 0,
    24. 					province: "",
    25. 					city: "",
    26. 					area: "",
    27. 					street: "",
    28. 					address: "",
    29. 				};
    30. 				uni.getLocation({
    31. 					type: "gcj02",
    32. 					success(res) {
    33. 						location.longitude = res.longitude;
    34. 						location.latitude = res.latitude;
    35. 		
    36. 						const qqmapsdk = new QQMapWX({
    37. 							key: 'ANDBZ-VEM6T-IPIXG-VEWUH-XJYGS-N2BPT'
    38. 						});
    39. 						qqmapsdk.reverseGeocoder({
    40. 							location,
    41. 							success(response) {
    42. 								let info = response.result;
    43. 								console.log(info);
    44. 								location.province = info.address_component.province;
    45. 								location.city = info.address_component.city;
    46. 								location.area = info.address_component.district;
    47. 								location.street = info.address_component.street;
    48. 								location.address = info.address;
    49. 								resolve(location);
    50. 							}
    51. 						});
    52. 					},
    53. 					fail(err) {
    54. 						console.log(err)
    55. 					}
    56. 				})
    57. 			})
    58. 		}
    59. 	}
    60. }

    显示：

    引入：

    生命周期调用：

    代码直接使用即可：

    1. <template>
    2. 	<view class="site">
    3. 		<view class="map">
    4. 			<uni-search-bar class="uni-mt-10" radius="100" placeholder="搜索城市/区县/地点" clearButton="none"
    5. 				cancelButton="none" @confirm="search" />
    6. 		</view>
    7.  
    8. 		<view class="current">
    9. 			<view style="display: flex; font-size: 28rpx; line-height: 44rpx;">
    10. 				<uni-icons type="location" size="20"></uni-icons>
    11. 				<txte v-if="position !== null">当前位置：{{position}}</txte>
    12. 			</view>
    13. 			<view style="display: flex; color: #4687e1; font-size: 28rpx;" @click="showto">
    14. 				<image src="../../../static/images/tabbar/locations.png" mode="aspectFill"
    15. 					style="width: 35rpx; height: 35rpx; margin-right: 10rpx;"></image>
    16. 				<text>刷新定位</text>
    17. 			</view>
    18.  
    19. 		</view>
    20. 		<view class="chosen">
    21. 			<view v-for="(item,index) in list" :key="index" class="box" @click="selects(index)"
    22. 				:class="{'active': activeindex === index}">
    23. 				{{item.name}}
    24. 				<view class="line" v-if="activeindex === index"></view>
    25. 			</view>
    26. 		</view>
    27.  
    28. 		<view class="area">
    29. 			<view class="area-box" v-for="(item,index) in box" :key="index" @click="city(index)"
    30. 				:class="{'active': activeindexs === index}">
    31. 				{{item.name}}
    32. 			</view>
    33. 		</view>
    34.  
    35. 		<view class="ess">
    36. 			<view v-if="activeindexs !== -1" class="area-box" v-for="(item,index) in boxs" :key="index"
    37. 				@click="citys(index)" :class="{'active': activeindextwo === index}">
    38. 				{{item.name}}
    39. 			</view>
    40. 		</view>
    41.  
    42. 		<uni-popup ref="popup" background-color="#fff">
    43. 			<view style="width: 300rpx; height: 300rpx;">
    44. 				<uni-loading></uni-loading>
    45. 			</view>
    46. 			
    47. 		</uni-popup>
    48. 	</view>
    49. </template>
    50.  
    51. <script>
    52. 	// import QQMapWX from "../../../common/qqmap-wx-jssdk.js"
    53. 	import {
    54. 		showMixin
    55. 	} from '../../../shopro/mixins/site.js'
    56. 	export default {
    57. 		mixins: [showMixin],
    58. 		data() {
    59. 			return {
    60. 				position: null,
    61. 				activeindex: 0,
    62. 				activeindexs: -1,
    63. 				activeindextwo: -1,
    64. 				list: [{
    65. 					name: '贵州省'
    66. 				}],
    67. 				box: [{
    68. 						name: '贵阳市'
    69. 					},
    70. 					{
    71. 						name: '安顺市'
    72. 					},
    73. 					{
    74. 						name: '遵义市'
    75. 					},
    76. 					{
    77. 						name: '毕节市'
    78. 					},
    79. 					{
    80. 						name: '黔东南'
    81. 					},
    82. 					{
    83. 						name: '黔东南'
    84. 					},
    85. 					{
    86. 						name: '黔东南'
    87. 					},
    88. 					{
    89. 						name: '黔东南'
    90. 					}
    91. 				],
    92. 				boxs: [{
    93. 						name: '花溪区'
    94. 					},
    95. 					{
    96. 						name: '观山湖区'
    97. 					},
    98. 					{
    99. 						name: '南明区'
    100. 					},
    101. 					{
    102. 						name: '云岩区'
    103. 					},
    104. 					{
    105. 						name: '白云区'
    106. 					},
    107. 					{
    108. 						name: '清镇'
    109. 					}
    110. 				],
    111.  
    112. 			}
    113. 		},
    114. 		async mounted() {
    115. 			const location = await this.getLocationInfo();
    116. 			console.log('location', location)
    117. 			// that.position = location.province + location.city
    118. 			let position = location.province + location.city + location.area
    119. 			console.log('position', position)
    120. 			this.position = position
    121.  
    122. 		},
    123. 		methods: {
    124. 			citys(index) {
    125. 				this.activeindextwo = index
    126. 			},
    127. 			city(index) {
    128. 				this.activeindexs = index
    129. 			},
    130. 			selects(index) {
    131. 				this.activeindex = index
    132. 				uni.showLoading({
    133. 					title:'加载中',
    134. 					mask: true
    135. 				})
    136. 				// this.$refs.popup.open('center')
    137. 			}
    138. 		},
    139. 		// change(e){
    140. 		// 	console.log('当前模式：' + e.type + ',状态：' + e.show);
    141. 		// }
    142. 	}
    143. </script>
    144.  
    145. <style scoped>
    146. 	.area-box {
    147. 		width: 130rpx;
    148. 		height: 80rpx;
    149. 		background-color: #fff;
    150. 		text-align: center;
    151. 		line-height: 80rpx;
    152. 		margin-top: 20rpx;
    153. 		margin-right: 10rpx;
    154. 		margin-left: 10rpx;
    155. 		border-radius: 20rpx;
    156. 	}
    157.  
    158. 	.ess {
    159. 		width: 100vw;
    160. 		height: 300rpx;
    161. 		/* 	background-color: #c9c9c9; */
    162. 		display: flex;
    163. 		justify-content: flex-start;
    164. 		align-items: flex-start;
    165. 		flex-flow: row wrap;
    166. 		align-content: flex-start;
    167. 		overflow-y: scroll;
    168. 	}
    169.  
    170. 	.area {
    171. 		width: 100vw;
    172. 		height: 300rpx;
    173. 		/* background-color: aqua; */
    174. 		display: flex;
    175. 		justify-content: flex-start;
    176. 		align-items: flex-start;
    177. 		flex-flow: row wrap;
    178. 		align-content: flex-start;
    179. 		overflow-y: scroll;
    180. 	}
    181.  
    182. 	.line {
    183. 		position: absolute;
    184. 		bottom: 10rpx;
    185. 		width: 70%;
    186. 		height: 5rpx;
    187. 		background-color: brown;
    188. 		border-radius: 50rpx;
    189. 		left: 0;
    190. 		right: 0;
    191. 		margin: auto;
    192. 	}
    193.  
    194. 	.box {
    195. 		width: 130rpx;
    196. 		height: 100%;
    197. 		/* background-color: antiquewhite; */
    198. 		text-align: center;
    199. 		line-height: 80rpx;
    200. 	}
    201.  
    202. 	.active {
    203. 		font-weight: bold;
    204. 		position: relative;
    205. 	}
    206.  
    207. 	.chosen {
    208. 		width: 100vw;
    209. 		height: 80rpx;
    210. 		padding: 0 20rpx;
    211. 		background: #f8f8f8;
    212. 	}
    213.  
    214. 	.current {
    215. 		display: flex;
    216. 		align-items: center;
    217. 		justify-content: space-between;
    218. 		width: 100vw;
    219. 		height: 100rpx;
    220. 		padding: 0 30rpx;
    221. 	}
    222.  
    223. 	.map {
    224. 		width: 100vw;
    225. 		height: 100rpx;
    226. 	}
    227.  
    228. 	.site {
    229. 		width: 100vw;
    230. 		height: 100vh;
    231. 		background-color: #fff;
    232. 	}
    233. </style>

    运行结果：

  • 相关阅读:
    前端周刊第三十六期
    go学习-基本知识点
    【机器学习】分值融合方法
    GPO：组策略与系统配置
    MATLAB实战Sobel边缘检测(Edge Detection)
    59.【C++迷宫小游戏(超详细，有手就行)】
    企业哪些项目可以参与CMMI的评估？
    如何使用Docker部署开源Leanote蚂蚁笔记并发布个人博客至公网
    【Linux】-文件操作（重定向、缓冲区以及Linux下一切皆文件的详解）
    如何搭建网课查题公众号？小白教程！内附免费题库接口！
  • 原文地址：https://blog.csdn.net/m0_65069237/article/details/136679330