diff --git a/src/components/AreaMap/index.vue b/src/components/AreaMap/index.vue
new file mode 100644
index 0000000..9a1c241
--- /dev/null
+++ b/src/components/AreaMap/index.vue
@@ -0,0 +1,235 @@
+<template>
+  <div class="container">
+    <div id="container"></div>
+    <div class="input-card-left">
+      <div style="color: red;">tips：双击区域可重新编辑</div>
+      <div style="color: red;">点击新建--左键开始建立停车区--右键完成建立--点击结束编辑才会最终生效</div>
+    </div>
+    <div class="input-card-right">
+      <el-button @click="createPolygon()">新建</el-button>
+      <!-- <el-button @click="polyEditor.open()">开始编辑</el-button> -->
+      <el-button @click="editClose">结束编辑</el-button>
+      <el-button @click="changeMapStyle()">切换地图</el-button>
+      <el-button @click="clearPolygon()">清除多边形</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import AMapLoader from "@amap/amap-jsapi-loader";
+import globalConfig from '@/utils/config/globalConfig'
+var polyEditor = "";
+function calculateCenter(mapList) {
+  var total = mapList.length;
+  var X = 0,
+    Y = 0,
+    Z = 0;
+  mapList.map((item) => {
+    var lng = (item[0] * Math.PI) / 180;
+    var lat = (item[1] * Math.PI) / 180;
+    var x, y, z;
+    x = Math.cos(lat) * Math.cos(lng);
+    y = Math.cos(lat) * Math.sin(lng);
+    z = Math.sin(lat);
+    X += x;
+    Y += y;
+    Z += z;
+  });
+  X = X / total;
+  Y = Y / total;
+  Z = Z / total;
+  var Lng = Math.atan2(Y, X);
+  var Hyp = Math.sqrt(X * X + Y * Y);
+  var Lat = Math.atan2(Z, Hyp);
+  let center = new AMap.LngLat((Lng * 180) / Math.PI, (Lat * 180) / Math.PI);
+  return center;
+}
+
+export default {
+  name: "AreaMap",
+  data() {
+    return {
+      map: null,
+      // polyEditor: null,
+      coordList: "",
+      timer: "",
+      status:true,
+      lon2: null,
+      lat2: null
+    };
+  },
+  props: ["pathList", "dataId","lon","lat","zoom"],
+  mounted() {
+    if (this.dataId) {
+      this.start();
+      console.log("修改");
+    } else {
+      this.echart();
+      console.log("添加");
+    }
+  },
+  methods: {
+    clearPolygon() {
+      this.status=false
+      if (polyEditor) {
+        polyEditor.close();  // 关闭多边形编辑器
+      }
+
+      // 移除地图上的所有多边形对象
+      this.map.getAllOverlays('polygon').forEach(polygon => {
+        this.map.remove(polygon);
+      });
+
+      // 如果需要，也可以清空与多边形相关的其他状态或数据
+      this.coordList = '';
+      this.$emit("mapList", '');
+
+      this.$emit("center", '');
+    },
+    changeMapStyle() {
+      // 创建一个默认的图层组件
+      let defaultLayer = new AMap.TileLayer();
+      // 创建一个卫星图图层组件
+      let satelliteLayer = new AMap.TileLayer.Satellite();
+      let roadNetLayer = new AMap.TileLayer.RoadNet();
+      // 将默认图层添加到地图中
+      this.map.add(defaultLayer);
+      // 获取当前地图显示的图层
+      let currentLayer = this.map.getLayers()[0]; // 假设默认图层在第一个位置
+      // 切换图层
+      if (this.type == 'default') {
+        // console.log(1111111)
+        //获取地图图层数据
+        this.map.setLayers([defaultLayer]); // 切换回默认图层
+        this.type = 'Satellite';
+      } else {
+        console.log(222222)
+        this.map.setLayers([satelliteLayer, roadNetLayer]); // 切换到卫星图图层
+        this.type = 'default';
+      }
+    },
+    start() {
+      this.timer = setInterval(this.echart, 1000); // 注意: 第一个参数为方法名的时候不要加括号;
+    },
+    async echart() {
+      clearInterval(this.timer);
+      console.log("接收参数", this.pathList);
+      console.log("接收参数", this.lon);
+      console.log("接收参数", this.lat);
+      this.lon2 = this.lon === null ? 120.35218 : this.lon;
+      this.lat2 = this.lat === null ? 26.944335 : this.lat;
+      // console.log(typeof JSON.parse(this.pathList));
+      await AMapLoader.load({
+        key: globalConfig.aMap.key, // 申请好的Web端开发者Key，首次调用 load 时必填
+        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+        plugins: [
+          "AMap.ToolBar",
+          "AMap.Driving",
+          "AMap.PolygonEditor",
+          "AMap.PlaceSearch",
+        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+      }).then((AMap) => {
+        this.map = new AMap.Map("container", {
+          //设置地图容器id
+          viewMode: "3D", //是否为3D地图模式
+          zoom: this.zoom?this.zoom:13, //初始化地图级别
+          center: [this.lon2, this.lat2], // 初始化地图中心点位置
+        });
+        this.map.setFitView();
+      })
+        .catch((e) => {
+          console.log(e);
+        });
+      this.initEditor();
+
+    },
+    initEditor() {
+      var path1 = []
+      if (this.dataId) {
+        path1 = JSON.parse(this.pathList) || [];
+
+      }
+
+      var polygon1 = new AMap.Polygon({
+        path: path1,
+      });
+      this.map.add([polygon1]);
+      polyEditor = new AMap.PolygonEditor(this.map);
+      // console.log(polyEditor);
+      // console.dir(polyEditor);
+      polyEditor.on("add", (data) => {
+        // console.log(data);
+        this.coordList = data.lnglat;
+        var polygon = data.target;
+        polygon.on("dblclick", () => {
+          polyEditor.setTarget(polygon);
+          polyEditor.open();
+        });
+      });
+      polygon1.on("dblclick", () => {
+        polyEditor.setTarget(polygon1);
+        polyEditor.open();
+      });
+
+      return polyEditor;
+    },
+    createPolygon() {
+      this.status=true
+      polyEditor.close();
+      polyEditor.setTarget();
+      polyEditor.open();
+    },
+    editClose: function () {
+      // console.log("this", this);
+
+      let that = this;
+      polyEditor.on("end", function (event) {
+        // event.target 即为编辑后的多边形对象
+        //多边形的坐标
+        this.coordList = event.target.getPath();
+        // console.log("coordList", this.coordList);
+        let mapList = [];
+        this.coordList.forEach((v) => {
+          // console.log("v", v.lng, "--", v.lat);
+          mapList.push([v.lng, v.lat]);
+        });
+        let center = calculateCenter(mapList);
+        console.log(mapList,'mapListmapList');
+        that.$emit("mapList", mapList);
+
+        that.$emit("center", center);
+
+      });
+      polyEditor.close();
+    },
+  },
+  beforeDestroy() {
+    clearInterval(this.timer);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+#container {
+  width: 100%;
+  height: 700px;
+}
+
+.container {
+  position: relative;
+  border: 1px solid rgb(204, 204, 204);
+
+  .input-card-right {
+    position: absolute;
+    bottom: 15px;
+    right: 15px;
+  }
+  .input-card-left {
+    position: absolute;
+    top: 5px;
+    left: 20px;
+    font-size: 13px;
+    line-height: 20px;
+  }
+}
+</style>
diff --git a/src/views/system/area/index.vue b/src/views/system/area/index.vue
index 77907c1..3c77c79 100644
--- a/src/views/system/area/index.vue
+++ b/src/views/system/area/index.vue
@@ -129,6 +129,16 @@
 <!--        <el-form-item label="边界值" prop="boundaryStr">-->
 <!--          <el-input v-model="form.boundaryStr" type="textarea" placeholder="请输入内容" />-->
 <!--        </el-form-item>-->
+        <area-map
+          :key="key"
+          v-model="form.boundaryStr"
+          :dataId="form.areaId"
+          :pathList="form.boundaryStr"
+          :lon="form.longitude"
+          :lat="form.latitude"
+          @center="center"
+          @mapList="mapList"  
+        />
         <el-form-item label="经度" prop="longitude">
           <el-input v-model="form.longitude" placeholder="请输入经度" />
         </el-form-item>
@@ -160,10 +170,12 @@
 </template>
 
 <script>
+import AreaMap from "@/components/AreaMap";
 import { listArea, getArea, delArea, addArea, updateArea } from "@/api/rl/area";
 
 export default {
   name: "Area",
+  components: { AreaMap },
   data() {
     return {
       // 遮罩层
@@ -200,6 +212,7 @@ export default {
         areaTimeStart: null,
         areaTimeEnd: null
       },
+      key: 0,
       // 表单参数
       form: {},
       // 表单校验
@@ -297,6 +310,7 @@ export default {
         }
       });
     },
+    
     /** 删除按钮操作 */
     handleDelete(row) {
       const areaIds = row.areaId || this.ids;
@@ -312,7 +326,16 @@ export default {
       this.download('system/area/export', {
         ...this.queryParams
       }, `area_${new Date().getTime()}.xlsx`)
-    }
+    },
+    center(data) {
+      this.form.longitude = data.lng;
+      this.form.latitude = data.lat;
+    },
+    mapList(data) {
+      let mapListJson = JSON.stringify(data);
+      console.log("mapListJson:" + mapListJson);
+      this.form.boundaryStr = mapListJson;
+    },
   }
 };
 </script>