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打开地图选择位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解webpack 最简打包结果分析

    详解webpack 最简打包结果分析

    这篇文章主要介绍了详解webpack 最简打包结果分析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • 函数式 JavaScript(一)简介

    函数式 JavaScript(一)简介

    JavaScript 是一种强大但被误解的语言。关于它到底是一种面向对象的语言还是函数式语言,人们众说纷纭——但是现在让我们把这些争辩都抛到脑后。
    2014-07-07
  • JavaScript 类型转换的详细实现

    JavaScript 类型转换的详细实现

    本文主要介绍了JavaScript 类型转换的详细实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • 微信小程序实现比较功能的方法汇总(五种方法)

    微信小程序实现比较功能的方法汇总(五种方法)

    这篇文章主要介绍了微信小程序实现比较功能的方法,本文给大家列举出五种方式,每种方法通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • 关于base64编码和解码的js工具函数

    关于base64编码和解码的js工具函数

    这篇文章主要介绍了关于base64编码和解码的js工具函数,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • js实现当复选框选择匿名登录时隐藏登录框效果

    js实现当复选框选择匿名登录时隐藏登录框效果

    这篇文章主要介绍了js实现当复选框选择匿名登录时隐藏登录框效果,实例分析了javascript动态操作页面元素样式的相关技巧,非常简单实用,需要的朋友可以参考下
    2015-08-08
  • js操作checkbox遇到的问题解决

    js操作checkbox遇到的问题解决

    这篇文章介绍了js操作checkbox遇到的问题解决,有需要的朋友可以参考一下
    2013-06-06
  • JavaScript实现秒杀时钟倒计时

    JavaScript实现秒杀时钟倒计时

    这篇文章主要为大家详细介绍了JavaScript实现秒杀时钟倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • 发表文章时自动保存到剪贴板

    发表文章时自动保存到剪贴板

    发表文章时自动保存到剪贴板...
    2006-10-10
  • Js操作DOM元素及获取浏览器高宽的简单方法

    Js操作DOM元素及获取浏览器高宽的简单方法

    下面小编就为大家带来一篇Js操作DOM元素及获取浏览器高宽的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09

最新评论