uniapp 微信小程序获取位置信息

uniapp 微信小程序获取位置信息

  • 流程
      • 1. 腾讯地图获取key[去申请](https://lbs.qq.com/dev/console/application/mine)
      • 2. 添加微信小程序的服务器域名 https://apis.map.qq.com
      • 3. 下载qqmap-wx-jssdk.min.js[下载](https://mapapi.qq.com/web/miniprogram/JSSDK/qqmap-wx-jssdk1.2.zip)
      • 4. 直接上代码

流程

uniapp 微信小程序获取位置信息_第1张图片

1. 腾讯地图获取key去申请

2. 添加微信小程序的服务器域名 https://apis.map.qq.com

uniapp 微信小程序获取位置信息_第2张图片

3. 下载qqmap-wx-jssdk.min.js下载

4. 直接上代码

	
	import QQMapWX from '@/static/js/qqmap-wx-jssdk.min.js';
	export default {
		data() {
			return {
				park: ["陕西省", "西安市", "雁塔区"],
				location:{},
			};
		},
		onLoad() {
			qqmapsdk = new QQMapWX({
				key: '自己申请的key'
			});
			console.log("load");
			this.getGeocoder()
		},
		methods:{
			getGeocoder() {
				//这个是使用自带的api获取当前经纬度后存到本地后获取
				this.location = uni.getStorageSync("location")
				
				let _this = this
				qqmapsdk.reverseGeocoder({
					location: {
						latitude: this.location.latitude,
						longitude: this.location.longitude
					},
					success(data) {
					//获取到的当前位置信息,data结果如下
						// message: "query ok"
						// request_id: "77bdb23a-054f-11ec-b2be-6c92bf5ebc0c"
						// result: {location: {…}, address: "陕西省西安市雁塔区北石桥路10118号", formatted_addresses: {…}, address_component: {…}, ad_info: {…}, …}
						// status: 0
						//解构赋值获取当前省市区
						let {
							province,
							city,
							district
						} = data.result.address_component
						_this.park = [province, city, district]
						//获取数据。。。
					},
					fail: function(error) {
						console.error(error);
					},
					complete: function(res) {
						console.log(res);
					}

				})
			},
}

完结

你可能感兴趣的:(uniqpp,定位,小程序,javascript)