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>
相关推荐
2501_915909061 天前
uni-app iOS 上架常见问题与解决方案,实战经验全解析
android·ios·小程序·https·uni-app·iphone·webview
编程猪猪侠1 天前
uni-app与Vue3,实现3D圆柱形旋转画廊效果
3d·uni-app
BUG创建者1 天前
uniapp vue页面传参到webview.nvue页面的html或者另一vue中
vue.js·uni-app·html
编程迪1 天前
找活招工系统源码 雇员雇主小程序 后端JAVA前端uniapp
java·spring boot·uni-app
不吃香菜的猪1 天前
uniapp中使用echarts并且支持pc端的拖动、拖拽和其他交互事件
uni-app·echarts·交互
伍哥的传说1 天前
Uni-App + Vue onLoad与onLaunch执行顺序问题完整解决方案 – 3种实用方法详解
javascript·vue.js·uni-app·事件总线·onlaunch·onload·promise状态管理
金州_拉文1 天前
uniapp
前端·uni-app
懒大王95272 天前
uniapp 开发上架 iOS App全流程
uni-app
yuehua_zhang2 天前
uni app 的app 端调用tts 进行文字转语音
前端·javascript·uni-app
小浣熊喜欢揍臭臭2 天前
uniapp+vue3 微信小程序全屏广告组件功能
微信小程序·uni-app