uniapp使用uni.chooseLocation()打开地图选择位置详解

 更新时间:2023年06月30日 09:28:43   作者:哇,女前端哎!  
这篇文章主要给大家介绍了关于uniapp使用uni.chooseLocation()打开地图选择位置的相关资料,因为最近在项目中遇到一个要用户授权位置且可以用户自己选择位置的功能,需要的朋友可以参考下

使用uni.chooseLocation()打开地址选择位置

1、打开微信开发平台申请权限

【开发】–【开发管理】–【接口设置】–点击去开通,开通之后才可以使用。

2、对小程序进行设置

“requiredPrivateInfos”:[“chooseLocation”]

1.第一种在 uniapp进行设置

2.第二种在原生微信小程序上设置

3、在app.vue里添加微信用户授权

onLaunch: function() {
	uni.authorize({
	  scope: 'scope.userLocation',
	  success: function () {
	    console.log('用户同意了授权')
	  }
	})
},

4、在页面调起地图选择

<template>
	<view class="content">
		<button @tap="authVerification">请选择位置</button>
		<template v-if="currentLocation.address">
		  <div>name:{{currentLocation.name}}</div>
		  <div>address:{{currentLocation.address}}</div>
		  <div>latitude:{{currentLocation.latitude}}</div>
		  <div>longitude:{{currentLocation.longitude}}</div>
		</template>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				currentLocation:{},
			}
		},
		onShow () {
		  uni.getStorage({
		    key: 'currentLocation',
		    success: (res) => {
		      this.currentLocation = res.data
		    }
		  })
		},
		methods: {
			authVerification () {
			  uni.getSetting({
			    success: (res) => {
			      if (res.authSetting['scope.userLocation']) { /* 用户授权成功时走这里 */
			        this.handerChooseLocation()
			      } else if (res.authSetting['scope.userLocation'] === undefined) { /* 用户未授权时走这里 */
			        console.log('没有授权')
			        this.handleOpenSetting()
			      } else { /* 用户拒绝了授权后走这里 */
			        console.log('拒绝了授权 false')
			        this.handleOpenSetting()
			      }
			    },
			  })
			},
			handerChooseLocation (latitude, longitude) {
			  uni.chooseLocation({
			    latitude: latitude || '',
			    longitude: longitude || '', 
			    success: (res) => {
			      console.log('wx.chooseLocation res=', res)
			      uni.setStorageSync('currentLocation', res)
			    },
			    fail: function (err) {
			      console.log('取消按钮', err)
			    }
			  })
			},
			handleOpenSetting () {
			  wx.openSetting({
			    success: (res) => {
			      console.log('定位 openSetting', res)
			      if (res.authSetting["scope.userLocation"]) {
			        this.handerChooseLocation()
			      }
			    }
			  })
			}
		}
	}
</script>

总结

到此这篇关于uniapp使用uni.chooseLocation()打开地图选择位置的文章就介绍到这了,更多相关uniapp打开地图选择位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • javascript中contains是否包含功能实现代码(扩展字符、数组、dom)

    javascript中contains是否包含功能实现代码(扩展字符、数组、dom)

    原生JS中是有contains方法的,但只有dom元素的包含关系,这里脚本之家就为大家分享一下扩展的字符string与数组arr的扩展代码
    2020-04-04
  • javascript密码强度校验代码(两种方法)

    javascript密码强度校验代码(两种方法)

    为了保证网站个人信息的安全,很多网站在注册页面都设置密码强度这项,用javascript如何实现密码强度校验代码呢?下面小编给大家整理了两种方法使用javascript密码强度校验代码,有需要的朋友可以参考下
    2015-08-08
  • javascript中html字符串转化为jquery dom对象的方法

    javascript中html字符串转化为jquery dom对象的方法

    最近项目需求要开发百度地图相关的一个应用,需要从硬编码的html字符串中提取自己想要的元素以及属性信息,由于在js中或者jq中操作元素节点以及属性都是使用dom对象或者jq对象。下面介绍javascript中html字符串转化为jquery dom对象的方法,需要的朋友可以参考下
    2015-08-08
  • JS数组循环的方式以及效率分析对比

    JS数组循环的方式以及效率分析对比

    本文详细讲解了JS数组循环的方式以及效率分析对比,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-11-11
  • 用js写“算24”游戏的思路分析与实现代码

    用js写“算24”游戏的思路分析与实现代码

    “算24”是一种游戏,小时候玩过,就是一副扑克,把大王,小王除掉,A算1点J,Q,K都算10点。任意抽4个牌,可以运用+-*/()来进行运算,把最后结果等于24。
    2008-05-05
  • 基于JavaScript实现定时跳转到指定页面

    基于JavaScript实现定时跳转到指定页面

    本篇文章给大家介绍基于javascript实现定时跳转到指定页面的相关知识,涉及到js跳转到指定页面的相关内容,对js跳转到指定页面相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • JavaScript数组之展开运算符详解

    JavaScript数组之展开运算符详解

    这篇文章主要给大家介绍了关于JavaScript数组之展开运算符的相关资料,你可以通过展开操作符(Spread operator)扩展一个数组对象和字符串,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • js设置和获取自定义属性的方法

    js设置和获取自定义属性的方法

    下面小编就为大家带来一篇js设置和获取自定义属性的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • JS在TextArea光标位置插入文字并实现移动光标到文字末尾

    JS在TextArea光标位置插入文字并实现移动光标到文字末尾

    JS在TextArea光标位置插入文字+移动光标到文字末尾,Firefox,Chrome,Safari以及Opera都有selectionStart和selectionEnd属性,具体实现如下,感兴趣的朋友可以参考下哈
    2013-06-06
  • 使用layui实现的左侧菜单栏以及动态操作tab项方法

    使用layui实现的左侧菜单栏以及动态操作tab项方法

    今天小编就为大家分享一篇使用layui实现的左侧菜单栏以及动态操作tab项方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论