PC端配置定位服务步骤(依赖于腾讯位置服务)

Tea-pd

已于 2023-01-31 08:47:31 修改

阅读量1.1k

点赞数 1

分类专栏： uni-app 文章标签： vue.js 前端 javascript npm

于 2022-11-28 14:52:29 首次发布

本文链接：https://blog.csdn.net/tea_tea_/article/details/128078887

版权

uni-app 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一步：安装 jsonp

第二步：在mian.js中配置并使用

第三步：在 manifest.json中进行相关配置

第四步：获取经纬度值，从而得到地址

第一步：安装 jsonp

执行此代码： npm install vue-jsonp --save

第二步：在mian.js中配置并使用

import { VueJsonp } from 'vue-jsonp'
Vue.use(VueJsonp)

第三步：在 manifest.json中进行相关配置

这里必须配置，不可以忘，否则会出现报错

第四步：获取经纬度值，从而得到地址

uni.getLocation({    //获取当前的地理位置、速度
				type: 'gcj02', 
				highAccuracyExpireTime: 100,   
				success: (res => {
					// console.log('当前位置的经度：' + res.longitude);
					// console.log('当前位置的纬度：' + res.latitude);
					// #ifdef MP
					this.qqmapsdk.reverseGeocoder({
						location: {
							latitude: res.latitude, //纬度
							longitude: res.longitude // 经度
						},

						success: (req) => {
							console.log(req);
							this.address = req.result.address
						}
					})
					// #endif

					// #ifdef H5
					let url = 'https://apis.map.qq.com/ws/geocoder/v1/'   
					let data = {                                           //模板
						location: res.latitude + ',' + res.longitude,    //拼接形式
						key: '11111',		 //自己的key
						output: 'jsonp',
						callback: 'jsonp'
					}
					this.$jsonp(url, data).then(req => {
						if (req.status == 0) {
							console.log(req, 'succ')   //成功会返回相关信息
							this.address = req.result.address
						} else {
							console.log(req, 'err')   //返回失败原因
						}
					})
					// #endif

				})