vue 高德地图电子围栏

Vue高德地图电子围栏是一种在前端应用中利用高德地图API实现的功能，它允许开发者设置虚拟的地理边界范围。通过监听地图上的Marker、Polygon或者其他几何区域，当用户的位置进入或离开这个围栏时，可以触发自定义的业务逻辑，例如导航提示、推送通知等。

在Vue项目中，通常会先引入高德地图JS API，然后创建`AMap.Map`实例，并在其上添加`AMap.Circle`（圆形围栏）或`AMap.Polygon`（多边形围栏）。设置围栏的中心点、半径或边界线，以及相关的事件监听，如`moveend`（位置改变结束）和`dragend`（拖动结束）。

以下是一个简单的示例：

<template>
  <div ref="mapContainer" style="height: 500px; width: 100%;"></div>
</template>

<script>
import AMap from 'highcharts-amap';

export default {
  data() {
    return {
      map: null,
      circle: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 初始化地图
      this.map = new AMap.Map('mapContainer', {
        zoom: 13,
        center: [116.404, 39.915], // 北京坐标
      });

      // 创建并设置电子围栏
      this.circle = new AMap.Circle({
        center: [116.404, 39.915],
        radius: 1000, // 单位米
        clickable: true, // 是否允许点击
        fillColor: '#FF0000',
        strokeWeight: 2,
      });
      this.map.add(this.circle);
      // 监听变化
      this.circle.on('moveend dragend', this.handleMoveEnd);
    },
    handleMoveEnd(e) {
      const position = e.target.getCenter();
      console.log(`围栏状态变化：${position.lng},${position.lat}`);
      // 根据实际需求处理其他业务逻辑
    },
  },
};
</script>