【uniapp】小程序使用地图定位获取位置并在页面展示

在这里插入图片描述
1.先去微信公众平台去开通
在这里插入图片描述
2.再去添加插件,搜索‘腾讯位置服务地图选点’,然后点击添加
在这里插入图片描述
3.去申请开发者密钥
https://lbs.qq.com?lbs_invite=Y9PRFLY

4.在uniapp配置插件相关不然报错, provider是写死的wx76a9a06e5b4e693e
在这里插入图片描述

下面是页面展示处理,就是获取到位置然后赋值页面展示

onShow() {
    
    
			const location = chooseLocation.getLocation();
			//conole.log(location )
			if (location) {
    
    
				//location.address和location.name都是地理位置
				this.position = location.address + location.name
			}
		},

一个点击事件

_getusermapinfo() {
    
    
				uni.getLocation({
    
    
						type: 'gcj02',//腾讯地图使用gcj02获取位置坐标
						success(res) {
    
    
							//使用在腾讯位置服务申请的key(必填)
							const key = "自己申请的KEY";
							//调用插件的app的名称(必填)
							const referer = "app名称";
							wx.navigateTo({
    
    
								url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer,
							});
						},
						fail(err) {
    
     //这里处理用户点击拒绝或者误操作拒绝的办法
							 uni.showModal({
    
    
							 	title: '提示',
							 	content: '您未开启获取位置权限,请点击确定去开启权限!',
							 	success(res) {
    
    
							 	    if (res.confirm) {
    
    
							 		 uni.openSetting({
    
    })//跳转微信小程序设置,手动打开获取位置
							    	 }
							 	}
							 })
							 
						}
				})
			},

猜你喜欢

转载自blog.csdn.net/weixin_48772762/article/details/117220665