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

【uniapp】小程序使用地图定位获取位置并在页面展示_第1张图片
1.先去微信公众平台去开通
【uniapp】小程序使用地图定位获取位置并在页面展示_第2张图片
2.再去添加插件,搜索‘腾讯位置服务地图选点’,然后点击添加
【uniapp】小程序使用地图定位获取位置并在页面展示_第3张图片
3.去申请开发者密钥
https://lbs.qq.com?lbs_invite=Y9PRFLY

4.在uniapp配置插件相关不然报错, provider是写死的wx76a9a06e5b4e693e
【uniapp】小程序使用地图定位获取位置并在页面展示_第4张图片

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

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({})//跳转微信小程序设置,手动打开获取位置
							    	 }
							 	}
							 })
							 
						}
				})
			},

你可能感兴趣的:(uniapp,微信小程序,vue.js,html,前端,javascript,css)