uniapp 获取当前位置信息

最新推荐文章于 2024-08-07 15:06:08 发布

种地的小王子

最新推荐文章于 2024-08-07 15:06:08 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/weixin_50114203/article/details/116645282

版权

老样子先看效果图

代码很简单

templete部分

<!-- 公司地址 -->
			<areaSelect></areaSelect>
			<view class="select-item" @click="detail_address">
				<view class="titles" style="padding: 10upx 30upx 10upx 30upx;display: flex;align-items: center;">
					<view class="chooseDate">
						<view mode="selector" class="Alineof" style="display: flex;align-items: center;">
							<text style="display: block;width: 196upx;">详细地址</text>
							<!-- <text v-if="showoptions_8" style="padding-left: 30rpx" class="uni-input">
								{{detailAddress}}
							</text>
							<text v-else style="color: #C0C4CC;padding-left: 30rpx">选择详细地址</text> -->
							<u-input class="ipttextmsg" v-model="detailAddress"  style="padding-left: 0rpx;" placeholder="请输入详细地址" />
						
						</view>
					</view>
					<image src="../../static/images/local.png" style="width: 30upx;height:30upx;vertical-align: middle;" mode=""></image>
				</view>
			</view>

大家如果需要公司地址三级联动的话看我第一篇文章前段时间更新过

js部分

// 详细地址
			detail_address(){
				uni.chooseLocation({
				    success:res=>{
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						this.detailAddress=res.address
						this.showoptions_8=true
					}
				});
			},

这里要注意一个地方就是成功后的回调函数需要写成箭头函数的形式，否则选完地址之后页面不会实时渲染或者使用强制更新的方法this.$forceUpdate()

ok 最后贴上我的这部分的css

.titles {
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
			border-bottom: 2rpx solid rgba(#e5e5e5, .4);
		}

		.select-lists {
			position: absolute;
			background-color: #FFFFFF;
			z-index: 10;
			width: 100%;
			top: 80rpx;
			box-shadow: 0 2rpx 30rpx 0rpx #C0C0C0;

			view {
				padding: 20rpx;
				border-bottom: 2rpx solid rgba(#e5e5e5, .4);
			}

		}

小结：目前来说还没有唤起获取位置的授权弹窗，有的小伙伴可能会需要，回头如果我整理了的话就给大家再贴上来