java和vue实现百度地图的电子围栏

要实现百度地图的电子围栏，需要使用百度地图JavaScript API和Vue.js框架。

首先，你需要在百度地图开放平台注册账号并创建应用，获取到AK（Access Key）。

接下来，在Vue项目中安装百度地图JavaScript API的库：

npm install baidu-map --save

然后，需要在Vue组件中引入百度地图JavaScript API和Vue.js框架：

<script src="http://api.map.baidu.com/api?v=2.0&ak=YOUR_AK"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

在Vue组件中，可以使用`<baidu-map>`标签来显示百度地图：

<template>
  <div>
    <baidu-map :center="center" :zoom="zoom"></baidu-map>
  </div>
</template>

<script>
import BaiduMap from 'vue-baidu-map'

export default {
  components: {
    BaiduMap
  },
  data() {
    return {
      center: { // 地图中心点
        lng: 116.404,
        lat: 39.915
      },
      zoom: 15 // 地图缩放级别
    }
  }
}
</script>

接下来就是实现电子围栏功能了。首先，需要在地图上绘制一个多边形，表示电子围栏的范围：

// 创建多边形对象
const polygon = new BMap.Polygon([
  new BMap.Point(116.409, 39.920),
  new BMap.Point(116.399, 39.920),
  new BMap.Point(116.399, 39.910),
  new BMap.Point(116.409, 39.910)
], {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5, fillColor: "blue", fillOpacity: 0.1});

// 添加多边形到地图中
map.addOverlay(polygon);

然后，需要监听地图上的移动事件，判断当前位置是否在电子围栏内：

// 监听地图移动事件
map.addEventListener("moveend", function() {
  // 判断当前位置是否在电子围栏内
  const point = map.getCenter();
  if (BMapLib.GeoUtils.isPointInPolygon(point, polygon)) {
    alert("在电子围栏内！");
  } else {
    alert("不在电子围栏内！");
  }
});

以上是Java和Vue实现百度地图的电子围栏的大致步骤，具体实现过程中还需要根据自己的需求进行调整。