【uniapp】实现电子围栏：

---

一、效果：

二、文档：

注意：地图服务商说明

三、案例：

OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77

<map id="map" style="height: 100%; width: 100%;"  :latitude="latitude" :longitude="longitude" :markers="covers" :polyline="polylineD" :polygons="polygons"></map>

export default {
	data() {
		return {
			polygons: [], 
			...
		}
	},
	methods: {
		/*
		* @Author: SunPeng
		* @Date: 2022-12-20 14:45:41
		* @Description: 获取电子围栏数据
		*/
		getGeofenceData() {
			const that = this
			let param = {
				deptId: uni.getStorageSync('userSiteInfo').deviceTypeId, // stringtrue机构ID
				stationId: uni.getStorageSync('userSiteInfo').selectId, //	string	true	磅点ID
				pageNum: '1', //string false 当前页数
				pageSize: '100', //string false 每页条数
			}

			this.questFun('geofence/search', 'get', 'bd', param, function(res) {
					if (res.data.code == 0) {
						that.polygons = []
						if (res.data.data.list.length == 0) {
							uni.showToast({
								title: '没有围栏数据',
								icon: 'none'
							})
							return
						}
						res.data.data.list.forEach(items => {
							let _data = [];
							items.points.forEach(item => {
								// console.log(item)   注意经纬度不要搞错了
								_data.push({ latitude: item[1], longitude: item[0], })
							});
							let ps = {
								points: _data,
								strokeColor: "#FD302F",
								strokeWidth: 2,
								fillColor: "green",
								fillOpacity: 0.4,
							};
							that.polygons.push(ps);
							// console.log(that.polygons)
						})
					} else {
						that.polygons = []
						uni.showToast({
							title: 'res.data.msg',
							icon: 'none'
						})
					}
				})
			},
	}
}

四、获取的数据详情：