uni-app：选择一个位置中心，输入距离为半径画圆

最新推荐文章于 2024-04-16 09:34:12 发布

叫我小鹏呀

最新推荐文章于 2024-04-16 09:34:12 发布

阅读量685

点赞数 8

文章标签： uni-app

本文链接：https://blog.csdn.net/weixin_69670563/article/details/136713429

版权

本文详细展示了如何在Vue应用中利用uni.chooseLocation获取用户位置，设置电子围栏，并通过circles属性在地图上显示半径范围，实现超出范围的预警功能。

摘要由CSDN通过智能技术生成

需求：需要一个电子围栏，超出范围预警，先选择一个位置中心，输入距离为半径画圆

解决方法：使用到circles属性

circles: [
			{
			    latitude: 39.909, // 纬度
				longitude: 116.39742, // 经度
				color: '#999', // 描边的颜色  
				fillColor: '#8cc4fc', // 填充颜色
				radius: 150,  // 圆半径，单位米
				strokeWidth: 1 // 描边的宽度
			}
		]

注意：使用了uni.chooseLocation，打开地图选择位置，获取围栏当前位置相关数据

完整代码：

<template>
	<view class="my-demo">
		<map style="width: 100%; height: 500px;" :latitude="latitude" :longitude="longitude" :markers="covers"
			:scale="scale" :circles="circles"></map>
		<view class="">
			<tui-form>
				<tui-input label="围栏中心" placeholder="请选择围栏中心" v-model="formData.address" disabled
					@click="locationClick"></tui-input>
				<tui-input label="围栏半径(m)" placeholder="请输入围栏半径" v-model="formData.radius"></tui-input>
			</tui-form>
			<view class="tui-btn__box">
				<tui-button width="400rpx" height="84rpx" bold @click="submit" type="green">提交</tui-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: 39.909, // 纬度
				longitude: 116.39742, // 经度
				covers: [], // 标记点
				scale: 17, // 缩放级别，取值范围为3-20
				circles: [],
				formData: {
					address: '',
					radius: '',
				}
			}
		},
		onLoad() {
			// 获取当前位置		
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					this.latitude = res.latitude //  当前位置的纬度
					this.longitude = res.longitude // 当前位置的经度
				}
			})
		},
		methods: {
			// 选择中心点
			locationClick() {
				// 打开地图选择位置。
				uni.chooseLocation({
					success: (res) => {
						this.formData.address = res.address // 详细地址
						this.latitude = res.latitude //  当前位置的纬度
						this.longitude = res.longitude // 当前位置的经度
						this.covers = [{
							id: 0,
							latitude: parseFloat(res.latitude),
							longitude: parseFloat(res.longitude),
							iconPath: '../../static/images/maps/location.png',
							width: "102rpx",
							height: '102rpx'
						}]
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
					}
				})
			},
			// 提交
			submit() {
				this.circles = [{
					latitude: this.latitude, // 纬度
					longitude: this.longitude, // 经度
					color: '#999', // 描边的颜色  
					fillColor: '#8cc4fc', // 填充颜色
					radius: parseFloat(this.formData.radius), // 圆半径，单位米
					strokeWidth: 1 // 描边的宽度
				}]
			}
		}
	}
</script>

<style lang="less" scoped>
	.my-demo {
		min-height: 100%;

		.tui-btn__box {
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>