uniapp实现地图电子围栏功能

该功能使用uniapp中内置组件map实现

效果图预览:

实现过程:

1.文档:

2.代码:

<template>
	<view>
		<map :style="'width: 100%;'+ 'height:'+screenHeight" :latitude="latitude" :longitude="longitude"
			:polygons="polygons" :markers="markerList">
		</map>
		<switch color="#FFCC33" style="transform:scale(0.8)" @change="switch1Change" :checked="ched"/>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				ched:true,
				"longitude": 116.44053,
				"latitude": 39.960038,
				screenHeight: '400px',
				markerList: [{
					"id": 1,
					"longitude": 116.440529,
					"latitude": 39.960026,
					"iconPath": '../../static/dian.png',
					"width": "80rpx",
					"height": "80rpx"
				}],
				polygons: [{
					//多边形的坐标数组
					points: [{
						"longitude": 116.439688,
						"latitude": 39.961146
					}, {
						"longitude": 116.439697,
						"latitude": 39.959854
					}, {
						"longitude": 116.441444,
						"latitude": 39.959863
					}, {
						"longitude": 116.441467,
						"latitude": 39.959979
					}, {
						"longitude": 116.441448,
						"latitude": 39.960049
					}, {
						"longitude": 116.439756,
						"latitude": 39.961175
					}],
					fillColor: "#cbdde9", //填充颜色
					strokeColor: "#78addd", //描边颜色
					strokeWidth: 2, //描边宽度
					zIndex: 1, //层级
				}]
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>
相关推荐
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
Random_index4 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
初遇你时动了情12 小时前
uniapp 城市选择插件
开发语言·javascript·uni-app
小小黑00714 小时前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue
草字14 小时前
uniapp input限制输入负数,以及保留小数点两位.
java·前端·uni-app
前端小胡兔15 小时前
uniapp rpx兼容平板
uni-app
荔枝吖15 小时前
uniapp实现开发遇到过的问题(持续更新中....)
uni-app
艾小逗15 小时前
uniapp将图片url转换成base64支持app和h5
uni-app·base64·imagetobase64
halo141617 小时前
uni-app 界面TabBar中间大图标设置的两种方法
开发语言·javascript·uni-app
赣州云智科技的技术铺子2 天前
uni app下开发AI运动小程序解决方案
uni-app·ai运动·ai运动识别·运动识别引擎·uni ai运动解决方案·ai运动会·ai体测