使用前请先申请高德地图key
JavaScript API | 腾讯位置服务
npm install lodash-es效果图
子组件代码
<template><div class="fence-container"><div v-if="loading" class="map-loading"><div class="loader"></div><div class="loading-text">地图加载中...</div></div><div id="map-container" style="width: 100%; height: 80vh"></div><div class="control-panel"><buttonv-if="!isCZ"@click="startCreate":disabled="isEditing || loading"class="create-btn">🗺️ 新建围栏</button><button @click="cancelCreate" v-show="isCreating" class="cancel-btn">❌ 取消创建</button><button v-if="isEditing" @click="finishEditing" class="edit-complete-btn">✔️ 完成编辑</button><div class="fence-list" v-if="fences.length"><h3>电子围栏列表（{{ fences.length }}）</h3><div v-for="fence in fences" :key="fence.id" class="fence-item"><span class="fence-id">围栏#{{ fence.id }}</span><div class="actions"><button@click="editFence(fence)":disabled="isEditing"class="edit-btn">✏️ 编辑</button><button@click="deleteFence(fence.id)":disabled="isEditing"class="delete-btn">🗑️ 删除</button></div></div></div></div></div>
</template><script>
import { debounce } from "lodash-es";export default {data() {return {isCZ: false, //是否存在map: null,fences: [],mapInstances: new Map(),mapInitPromise: null,mouseTool: null,editor: null,isCreating: false,isEditing: false,isClosing: false,loading: true,currentFence: null,editingFence: null,currentAdjustCallback: null,currentEndCallback: null,abortController: null,activeDrawHandler: null,debouncedUpdate: debounce(this.safeUpdateMapInstances, 300),};},props: {statrAddress: {type: Array,default: () => [],},},async mounted() {await this.initializeMap();let that = this;that.setCreated();//初始化围栏window.addEventListener("beforeunload", this.cleanupResources);},beforeDestroy() {this.cleanupResources();window.removeEventListener("beforeunload", this.cleanupResources);},methods: {//父组件帮助子组件完成编辑edneditF() {if (this.isEditing) {this.finishEditing();}console.log(this.fences, "判断是否还有地图存在");if (this.fences.length == 0) {this.$emit("getMapArr", "");}},//回显地图，单个多个都 可以 ，遵循格式// {// id: 1740361973441,// path: [// [116.380138, 39.920941],// [116.373443, 39.891708],// [116.41653, 39.887229],// [116.420993, 39.917254],// [116.380138, 39.920941],// ],// status: 'active',// },setCreated() {if (this.fences.length == 0) return;this.isCZ = true;for (let index = 0; index < this.fences.length; index++) {//必循遵循回显流程const polygon = new AMap.Polygon({path: this.fences[index].path,strokeColor: "#1791fc",fillColor: "#1791fc",strokeWeight: 4,fillOpacity: 0.4,extData: { id: this.fences[index].id }, // 添加扩展数据用于追踪});polygon.setMap(this.map);if (polygon) this.mapInstances.set(this.fences[index].id, polygon);}},//编辑完成finishEditing() {// this.map.remove(this.fences);// 执行编辑器关闭前的确认操作if (this.editor) {// 获取最终路径const finalPath = this.editor.getTarget().getPath();const index = this.fences.findIndex((f) => f.id === this.editingFence.id);console.log(this.fences, index, this.editingFence);// 更新数据this.$set(this.fences, {id: this.editingFence,path: [finalPath.lng, finalPath.lat],status: "active",});}// 强制关闭编辑器this.safeCloseEditor();//完成编辑后console.log(this.fences, "编辑后的数据");let data = JSON.stringify(this.fences);this.$emit("getMapArr", data);// 刷新地图显示this.$nextTick(() => {this.debouncedUpdate.flush();});},//创建 围栏cancelCreate() {try {// 关闭所有绘图工具this.mouseTool?.close(true);// 移除临时绘图事件监听if (this.activeDrawHandler) {this.mouseTool?.off("draw", this.activeDrawHandler);}// 清理可能存在的半成品围栏if (this.currentFence?.status === "creating") {const tempId = this.currentFence.id;this.safeRemovePolygon(tempId);}// 重置状态this.isCreating = false;this.currentFence = null;this.activeDrawHandler = null;// 强制重绘有效围栏this.$nextTick(() => {this.debouncedUpdate.flush();});} catch (error) {console.error("取消创建失败:", error);}},// 初始化地图async initializeMap() {let that = this;this.abortController = new AbortController();const { signal } = this.abortController;try {this.mapInitPromise = new Promise((resolve, reject) => {if (signal.aborted) return reject(new Error("用户取消加载"));AMap.plugin(["AMap.MouseTool", "AMap.PolygonEditor"], () => {if (signal.aborted) {this.cleanupResources();return reject(new Error("加载已中止"));}this.map = new AMap.Map("map-container", {zoom: 12,center: that.statrAddress,viewMode: "2D",});this.map.on("complete", () => {this.loading = false;this.initMouseTool();});resolve(true);});});await this.mapInitPromise;} catch (error) {console.error("地图初始化失败:", error);this.loading = false;}},// 初始化鼠标工具initMouseTool() {this.mouseTool = new AMap.MouseTool(this.map);this.mouseTool.on("draw", (event) => {this.handleDrawEvent(event);});},// 资源清理cleanupResources() {// 终止异步操作this.abortController?.abort();this.debouncedUpdate.cancel();// 清理绘图状态if (this.activeDrawHandler) {this.mouseTool?.off("draw", this.activeDrawHandler);this.activeDrawHandler = null;}// 清理编辑器this.safeCloseEditor();// 清理鼠标工具if (this.mouseTool) {this.mouseTool.close(true);this.mouseTool = null;}// 清理地图实例this.mapInstances.forEach((polygon) => {polygon?.setMap(null);polygon = null;});this.mapInstances.clear();// 销毁地图if (this.map) {try {this.map.destroy();} catch (e) {console.warn("地图销毁异常:", e);}this.map = null;}},// 安全创建多边形createMapPolygon(fence) {if (!this.map || !fence?.path) return null;try {const polygon = new AMap.Polygon({path: fence.path,strokeColor: "#1791fc",fillColor: "#1791fc",strokeWeight: 4,fillOpacity: 0.4,extData: { id: fence.id }, // 添加扩展数据用于追踪});polygon.setMap(this.map);return polygon;} catch (error) {console.error("创建多边形失败:", error);return null;}},// 安全更新地图实例async safeUpdateMapInstances(newVal) {try {await this.mapInitPromise;if (!this.map || this.isClosing) return;const currentIds = newVal.map((f) => f.id);// 清理无效实例this.mapInstances.forEach((polygon, id) => {if (!currentIds.includes(id)) {this.safeRemovePolygon(id);}});// 批量更新newVal.forEach((fence) => {if (!this.mapInstances.has(fence.id)) {const polygon = this.createMapPolygon(fence);if (polygon) this.mapInstances.set(fence.id, polygon);} else {this.updatePolygonPath(fence);}});} catch (error) {console.warn("地图更新中止:", error);}},// 安全更新路径updatePolygonPath(fence) {const polygon = this.mapInstances.get(fence.id);if (!polygon) return;try {const currentPath = polygon.getPath().map((p) => [p.lng, p.lat]);if (JSON.stringify(currentPath) !== JSON.stringify(fence.path)) {polygon.setPath(fence.path);}} catch (error) {console.error("路径更新失败:", error);this.safeRemovePolygon(fence.id);}},// 安全移除多边形safeRemovePolygon(fenceId) {const polygon = this.mapInstances.get(fenceId);if (!polygon) return;try {polygon.setMap(null);this.map.remove(polygon);this.mapInstances.delete(fenceId);} catch (error) {console.warn("多边形移除失败:", error);}},// 开始创建startCreate() {if (this.isEditing || this.loading) return;this.isCreating = true;this.currentFence = {id: Date.now(),path: [],status: "creating",};this.mouseTool.close(true);this.mouseTool.polygon({strokeColor: "#FF33FF",fillColor: "#1791fc00", // 半透明填充strokeWeight: 2,});},// 处理绘制事件handleDrawEvent(event) {if (!this.isCreating) return;const polygon = event.obj;const path = polygon.getPath();if (path.length < 3) {this.mouseTool.close(true);alert("至少需要3个顶点来创建围栏");return;}// 自动闭合路径const firstPoint = path[0];const lastPoint = path[path.length - 1];if (firstPoint.distance(lastPoint) > 1e-6) {path.push(firstPoint);}this.currentFence.path = path.map((p) => [p.lng, p.lat]);this.saveFence();this.mouseTool.close(true);},// 保存围栏saveFence() {try {if (!this.validateFence(this.currentFence)) return;this.fences = [...this.fences,{...this.currentFence,status: "active",},];this.debouncedUpdate.flush();} catch (error) {console.error("保存围栏失败:", error);} finally {this.resetCreationState();}//完成创建围栏let data = JSON.stringify(this.fences);this.$emit("getMapArr", data);this.isCZ = true;// console.log(this.fences, '电子围栏数组');},// 验证围栏validateFence(fence) {if (!fence?.path) return false;if (fence.path.length < 3) {alert("无效的围栏路径");return false;}// 检查路径闭合const first = fence.path[0];const last = fence.path[fence.path.length - 1];return first[0] === last[0] && first[1] === last[1];},// 重置创建状态resetCreationState() {this.isCreating = false;this.currentFence = null;this.mouseTool.close(true);},// 编辑围栏async editFence(fence) {if (this.isEditing || !this.mapInstances.has(fence.id)) return;await this.safeCloseEditor();this.isEditing = true;this.editingFence = fence;console.log(fence, "fence");// 创建编辑副本const original = this.mapInstances.get(fence.id);// this.safeRemovePolygon(fence.id);// const editPolygon = this.createMapPolygon({// // ...fence,// strokeColor: '#FF0000', // 编辑状态红色边框// });console.log(this.map, "this.map", original);this.editor = new AMap.PolygonEditor(this.map, original);this.editor.open();// 事件处理this.currentAdjustCallback = ({ target }) => {const newPath = target.getPath().map((p) => [p.lng, p.lat]);if (JSON.stringify(newPath) === JSON.stringify(fence.path)) return;const index = this.fences.findIndex((f) => f.id === fence.id);if (index > -1) {this.$set(this.fences, index, {...fence,path: newPath,});}};this.currentEndCallback = () => {const finalPath = this.editor.getTarget().getPath().map((p) => [p.lng, p.lat]);this.$set(this.fences,this.fences.findIndex((f) => f.id === fence.id),{ ...fence, path: finalPath });this.safeCloseEditor();};this.editor.on("adjust", this.currentAdjustCallback);this.editor.on("end", this.currentEndCallback);},// 安全关闭编辑器async safeCloseEditor() {if (this.isClosing || !this.editor) return;this.isClosing = true;try {// 关闭编辑器前保存状态const finalPath = this.editor.getTarget()?.getPath();if (finalPath) {const index = this.fences.findIndex((f) => f.id === this.editingFence?.id);if (index > -1) {this.fences[index].path = finalPath.map((p) => [p.lng, p.lat]);}}// 执行清理this.editor.off("adjust", this.currentAdjustCallback);this.editor.off("end", this.currentEndCallback);this.editor.close();} catch (error) {console.error("编辑器关闭异常:", error);} finally {this.isClosing = false;this.isEditing = false;this.editingFence = null;this.editor = null;}},// 删除围栏deleteFence(fenceId) {if (!confirm("确定要删除这个电子围栏吗？")) return;const index = this.fences.findIndex((f) => f.id === fenceId);if (index === -1) return;// 三重清理this.safeRemovePolygon(fenceId);this.$delete(this.fences, index);this.debouncedUpdate.flush();this.isCZ = false;},},//编辑出现旧路径更新watch: {fences: {deep: true,handler(newVal) {if (!this.isClosing) {this.debouncedUpdate(newVal);}},flush: "post",},},
};
</script><style scoped>
.fence-container {position: relative;height: 80vh;
}.map-loading {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(255, 255, 255, 0.95);z-index: 1000;display: flex;flex-direction: column;align-items: center;justify-content: center;
}.loader {border: 4px solid #f3f3f3;border-top: 4px solid #3498db;border-radius: 50%;width: 40px;height: 40px;animation: spin 1s linear infinite;
}.loading-text {margin-top: 15px;color: #666;
}.control-panel {position: absolute;top: 20px;left: 20px;background: rgba(255, 255, 255, 0.95);padding: 15px;border-radius: 8px;box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);min-width: 260px;z-index: 999;
}button {margin: 5px;padding: 8px 12px;border: none;border-radius: 4px;cursor: pointer;transition: all 0.3s;
}.create-btn {background: #4caf50;color: white;
}.cancel-btn {background: #f44336;color: white;
}.edit-complete-btn {background: #2196f3;color: white;animation: pulse 1.5s infinite;
}.edit-btn {background: #ffc107;color: black;
}.delete-btn {background: #9e9e9e;color: white;
}button:disabled {opacity: 0.6;cursor: not-allowed;
}.fence-list {margin-top: 15px;max-height: 60vh;overflow-y: auto;
}.fence-item {display: flex;justify-content: space-between;align-items: center;padding: 10px;margin: 8px 0;background: #f8f9fa;border-radius: 4px;
}.fence-id {font-size: 14px;color: #333;
}.actions {display: flex;gap: 8px;
}@keyframes spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}
}@keyframes pulse {0% {transform: scale(1);}50% {transform: scale(1.05);}100% {transform: scale(1);}
}
</style>父组件使用
<template><div id="app"><div v-if="flag"><GaoDeMap ref="Map" :statrAddress="statrAddress" v-if="flag" /></div><button @click="openMap">唤醒地图</button></div>
</template><script>
import GaoDeMap from "./components/GaoDeMap.vue";export default {name: "App",components: {GaoDeMap,},data() {return {flag: false,MapRealm: [], //围栏数据statrAddress: [], //当前位置};},mounted() {//创建script 标签window.tmapPromise = new Promise((resolve) => {window.init = () => {resolve();};const script = document.createElement("script");script.src = `https://webapi.amap.com/maps?v=2.0&key=67c5ae46f24b49d70af672c993a3bbfc`;document.head.appendChild(script);}).then(() => {});},methods: {//打开电子围栏openMap() {this.flag = true;this.statrAddress = [116.397428, 39.90923]; //自身当前位置//有围栏信息的话初始化地图if (this.MapRealm.length!=0) {this.$nextTick(() => {let arr = JSON.parse(this.MapRealm);this.$refs.Map.fences = arr;});return;}},//画完电子围栏后弹窗消失，拿到围栏信息getMapArr(coordinates) {console.log("用户绘制的区域坐标：", coordinates);// 接收参数提交到后端或进一步处理this.MapRealm = coordinates;},},
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>
