使用前請先申請高德地圖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>