UNIAPP----获取当前位置并显示页面上

本文介绍如何在uni-app中通过点击图标触发uni.chooseLocation方法获取位置信息,将位置和详细地址显示在页面上。示例代码包括HTML结构、事件绑定和数据处理。实测在微信小程序和APP中运行良好,谷歌浏览器可能出现限制。
摘要由CSDN通过智能技术生成

代码块:

HTML:

<view class="" style="width: 100%;z-index: 9999;">
		<view class="weizhi">
			<view><text>位置:</text>{{name}}</view>
		<text><text>详细地址:</text>{{address}}</text>
</view>

将位置和详细地址显示在页面上。

data里声明 name:  和  address: 空变量

给image图标添加个add()事件,点击执行uni.chooseLocation() 方法

<view class="add" @click="add">
		<image src="../../static/add.svg" mode=""></image>
</view>
add(){
				uni.chooseLocation({
					success: res=> {
						this.name=res.name
						this.address=res.address
					console.log('位置名称:' + res.name);
					console.log('详细地址:' + res.address);
					console.log('纬度:' + res.latitude);
					console.log('经度:' + res.longitude);
				},
				});
			},

将得到的res.name 和 res。address放到 两个空变量里面,{{ }} 绑定到页面上。

亲测app,微信小程序可用,并且很快很准,

谷歌浏览器打开的console会报此key今日已用完什么的,并且很慢,不用管。

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值