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

这篇具有很好参考价值的文章主要介绍了uniapp使用uni.chooseLocation()打开地图选择位置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

uniapp的chooselocation,小程序,uniapp,uni-app,javascript,前端uniapp的chooselocation,小程序,uniapp,uni-app,javascript,前端

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

【开发】–【开发管理】–【接口设置】–点击去开通,开通之后才可以使用。
uniapp的chooselocation,小程序,uniapp,uni-app,javascript,前端

2、对小程序进行设置

“requiredPrivateInfos”:[“chooseLocation”]

1.第一种在 uniapp进行设置
uniapp的chooselocation,小程序,uniapp,uni-app,javascript,前端
uniapp的chooselocation,小程序,uniapp,uni-app,javascript,前端
2.第二种在原生微信小程序上设置
uniapp的chooselocation,小程序,uniapp,uni-app,javascript,前端文章来源地址https://www.toymoban.com/news/detail-525300.html

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()打开地图选择位置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包