vue 高德地图 电子围栏

为了在Vue中使用高德地图电子围栏，你需要遵循以下步骤：

1.在main.js中注册Vue AMap插件并初始化AMap API Loader。确保你已经安装了vue-amap依赖项。

import Vue from 'vue'
import AMap from 'vue-amap'

Vue.use(AMap)

AMap.initAMapApiLoader({
  key: '你申请的key',
  plugin: [
    'AMap.Autocomplete',
    'AMap.PlaceSearch',
    'AMap.Scale',
    'AMap.OverView',
    'AMap.ToolBar',
    'AMap.MapType',
    'AMap.MouseTool',    'AMap.Polygon',
    'AMap.PolyEditor',
    'AMap.CircleEditor'
  ],
  v: '1.4.15'
})

2.在你的Vue组件中，使用`amap-polygon`组件来创建电子围栏。你需要提供一个`path`属性，它是一个包含多个经纬度坐标的数组。你还可以提供其他属性，例如`strokeColor`和`fillColor`来设置电子围栏的样式。

<template>
  <div>
    <amap :zoom="13" :center="center">
      <amap-polygon
        :path="path"
        strokeColor="#FF33FF"
        fillColor="#FF99FF"
        fillOpacity="0.2"
      />
    </amap>
  </div>
</template>

<script>
export default {
  data() {
    return {
      center: [116.397428, 39.90923],
      path: [
        [116.403322, 39.920255],
        [116.410703, 39.897555],
        [116.402292, 39.892353],
        [116.389846, 39.891365]
      ]
    }
  }
}
</script>

3.你还可以使用`amap-circle`组件来创建圆形电子围栏。你需要提供一个`center`属性和一个`radius`属性，分别表示圆心坐标和半径。

<template>
  <div>
    <amap :zoom="13" :center="center">
      <amap-circle
        :center="center"
        :radius="1000"
        strokeColor="#FF33FF"
        fillColor="#FF99FF"
        fillOpacity="0.2"
      />
    </amap>
  </div>
</template>

<script>
export default {
  data() {
    return {
      center: [116.397428, 39.90923]
    }
  }
}
</script>