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>
相关推荐
00后程序员张1 小时前
tcpdump 抓包分析,命令、过滤技巧、常见症状定位与移动真机补充方案
网络·测试工具·ios·小程序·uni-app·iphone·tcpdump
BumBle3 小时前
基于UniApp实现DeepSeek AI对话:流式数据传输与实时交互技术解析
前端·uni-app
会点法律的程序员4 小时前
小程序 地理位置授权怎么搞
前端·小程序·uni-app
重生之我是菜鸡程序员4 小时前
uniapp 顶部通知 上滑隐藏
前端·javascript·uni-app
FliPPeDround4 小时前
告别 uni-app 启动烦恼:@uni-helper/unh 让开发流程更顺畅
前端·微信小程序·uni-app
2501_915921437 小时前
iOS 26 电耗监测与优化,耗电问题实战 + 多工具 辅助策略
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_915921437 小时前
苹果软件混淆与 iOS 应用加固白皮书,IPA 文件加密、反编译防护与无源码混淆方案全解析
android·ios·小程序·https·uni-app·iphone·webview
anyup8 小时前
🔥开源零配置!10 分钟上手:create-uni + uView Pro 快速搭建企业级 uni-app 项目
前端·前端框架·uni-app
你真的可爱呀8 小时前
uniapp学习【vue3在uniapp中语法,使用element,使用uView UI】
学习·uni-app
保利威直播8 小时前
保利威uniapp直播插件功能清单-开播端/主播端/观看端(持续测试更新中...)
uni-app·直播·直播平台