uni-app实现地图输入选择地址

最新推荐文章于 2025-03-18 23:16:39 发布

一天28小时

最新推荐文章于 2025-03-18 23:16:39 发布

阅读量2k

点赞数 1

本文链接：https://blog.youkuaiyun.com/Programmerwhite/article/details/111177870

版权

这篇博客展示了如何在uni-app中结合u-input和map组件实现地图定位功能。通过uni.chooseLocation和uni.getLocation获取用户位置，并更新地图上的标记。同时，当输入框被点击时，也会触发定位更新，确保输入框的地址与地图同步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
	<view class="box">
		<view class="map">
			<u-input v-model="value" :type="type" :border="border" @click="inputHandle" />
			<map @tap="clickHandle" id="map" :latitude="latitude" :longitude="longitude" :markers="markers></map>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: uni.getStorageSync('address') ? uni.getStorageSync('address') : '',
				type: 'text',
				border: true,
				latitude: '',
				longitude: '',
				markers:[
					{
						latitude: '',
						longitude: '',
						iconPath:'../../static/imgs/bg.png'
					}
				],
			}
		},
		methods: {
			frame() {
				uni.chooseLocation({
					success: res => {
						this.latitude = res.latitude;
						this.longitude = res.longitude;
						this.value = res.address;
						this.markers[0].latitude = res.latitude;
						this.markers[0].longitude = res.longitude;
						this.markers[0].iconPath = '../../static/imgs/map.png';
					}
				});
			},
			onLoadHadnle() {
				uni.getLocation({
					type: 'wgs84',
					success: res => {
						this.longitude = res.longitude;
						this.latitude = res.latitude;
						this.markers[0].latitude = res.latitude;
						this.markers[0].longitude = res.longitude;
						this.markers[0].iconPath = '../../static/imgs/map.png';
					}
				});
			},
			inputHandle(e) {
				this.frame();
			},
			clickHandle(e) {
				this.frame();
			}
		},
		created() {
			this.onLoadHadnle();
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		height: 100vh;
		.map {
			width: 100%;
			height: 100%;

			map {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>