vue2 h5 画高德地图电子围栏

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/70878.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

unity学习54：图片+精灵+遮罩mask，旧版文本 text 和新的TMP文本

unity学习54：图片+精灵+遮罩mask，旧版文本 text 和新的TMP文本

目录 1 图片 image 1.1 如果直接导入image 1.2 图片 image 和精灵 sprite 1.2.1 继续修改上面的格式 texture type 是default 1.2.2 再次关联到UI的 image 物体上就可以了 1.3 图片和遮罩 mask 1.3.1 创建1个父物体和1个子物体&#xff0c;分别都是image 1.3.2 如果父…
阅读更多...
Spring Data JPA vs MyBatis：ORM框架如何选择？

Spring Data JPA vs MyBatis：ORM框架如何选择？

在选择ORM框架时&#xff0c;Spring Data JPA和MyBatis是两个常见的选择&#xff0c;它们各有优缺点&#xff0c;适用于不同的场景。以下是两者的对比&#xff0c;帮助你做出选择&#xff1a; 1. Spring Data JPA 优点&#xff1a; 开发效率高&#xff1a;通过简单的接口定义和…
阅读更多...
Selenium 与 Coze 集成

Selenium 与 Coze 集成

涵盖两者的基本概念、集成步骤、代码示例以及相关注意事项。 基本概念 Selenium：是一个用于自动化浏览器操作的工具集，支持多种浏览器（如 Chrome、Firefox 等），能够模拟用户在浏览器中的各种操作，如点击、输入文本、选择下拉框等，常用于 Web 应用的自动化测试。Coze：它…
阅读更多...
在线骑行|基于SpringBoot的在线骑行网站设计与实现(源码+数据库+文档)

在线骑行|基于SpringBoot的在线骑行网站设计与实现(源码+数据库+文档)

在线骑行网站系统 目录 基于SpringBoot的在线骑行设计与实现 一、前言 二、系统设计 三、系统功能设计 5.1用户信息管理 5.2 路线攻略管理 5.3路线类型管理 5.4新闻赛事管理 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取…
阅读更多...
[深度学习]基于C++和onnxruntime部署yolov12的onnx模型

[深度学习]基于C++和onnxruntime部署yolov12的onnx模型

基于C和ONNX Runtime部署YOLOv12的ONNX模型&#xff0c;可以遵循以下步骤&#xff1a; 准备环境&#xff1a;首先&#xff0c;确保已经下载后指定版本opencv和onnruntime的C库。 模型转换&#xff1a; 安装好yolov12环境并将YOLOv12模型转换为ONNX格式。这通常涉及使用深度学习…
阅读更多...
Imagination DXTP GPU IP：加速游戏AI应用，全天候畅玩无阻

Imagination DXTP GPU IP：加速游戏AI应用，全天候畅玩无阻

日前&#xff0c;Imagination 推出了最新产品——Imagination DXTP GPU IP&#xff0c;在智能手机和其他功耗受限设备上加速图形和AI工作负载时&#xff0c;保证全天候的电池续航。它是我们最新D系列GPU的最终产品&#xff0c;集成了自2022年发布以来引入的一系列功能&#xff…
阅读更多...
（python）Arrow库使时间处理变得更简单

（python）Arrow库使时间处理变得更简单

前言 Arrow库并不是简单的二次开发，而是在datetime的基础上进行了扩展和增强。它通过提供更简洁的API、强大的时区支持、丰富的格式化和解析功能以及人性化的显示，填补了datetime在某些功能上的空白。如果你需要更高效、更人性化的日期时间处理方式，Arrow库是一个不错的选择…
阅读更多...
pandas中的数据结构+数据查询

pandas中的数据结构+数据查询

pandas 数据结构 Series Series是一种类似于一维数组的对象&#xff0c;它由一组数据&#xff08;不同数据类型&#xff09;以及一组与之相关的数据标签&#xff08;即索引&#xff09;组成。 列表创建 仅有数据列表即可产生最简单的Series s1 pd.Series([1,a,5.2,7]) 左侧…
阅读更多...
使用前端 html css 和js 开发一个AI智能平台官网模板-前端静态页面项目

使用前端 html css 和js 开发一个AI智能平台官网模板-前端静态页面项目

最近 AI 人工智能这么火&#xff0c;那必须针对AI 做一个 AI方面的 官方静态网站练手。让自己的前端技术更上一层楼&#xff0c;哈哈。 随着人工智能技术的不断发展&#xff0c;越来越多的AI应用开始渗透到各行各业&#xff0c;为不同领域的用户提供智能化解决方案。本网站致力…
阅读更多...
React + TypeScript 数据模型驱动数据字典生成示例

React + TypeScript 数据模型驱动数据字典生成示例

React TypeScript 数据模型驱动数据字典生成示例 引言&#xff1a;数据字典的工程价值 在现代化全栈开发中&#xff0c;数据字典作为业务实体与数据存储的映射桥梁&#xff0c;直接影响系统可维护性与团队协作效率。传统手动维护字典的方式存在同步成本高和版本管理混乱两大痛…
阅读更多...
MySQL八股整理

MySQL八股整理

1. 如何定位慢查询&#xff1f; 慢查询一般发生在联表查询或者表中数据量较大时&#xff0c;当响应时间较长或者压测时间超过2s时&#xff0c;就认为是慢查询。定位慢查询的话一般有两种方法&#xff0c;一种是使用专门的分析工具去定位。另一种也是我们项目中之前使用过的方法…
阅读更多...
ShardingSphere Proxy 配置

ShardingSphere Proxy 配置

在使用 ShardingSphere Proxy 模式时&#xff0c;结合 主从复制架构 实现 读写分离&#xff0c;并按照 用户ID哈希算法 确定库、时间范围 确定表的场景下&#xff0c;配置文件需要做一些调整以支持分片、读写分离以及主从复制。 以下是如何配置 ShardingSphere Proxy 模式的详…
阅读更多...
Redis集群机制及一个Redis架构演进实例

Redis集群机制及一个Redis架构演进实例

Replication&#xff08;主从复制&#xff09; Redis的replication机制允许slave从master那里通过网络传输拷贝到完整的数据备份&#xff0c;从而达到主从机制。为了实现主从复制&#xff0c;我们准备三个redis服务&#xff0c;依次命名为master&#xff0c;slave1&#xff0c;…
阅读更多...
Qt QScrollArea 总结

Qt QScrollArea 总结

Qt QScrollArea 总结 1. 功能概述 滚动容器&#xff1a;用于显示超出视口&#xff08;Viewport&#xff09;范围的内容&#xff0c;自动提供滚动条。子部件管理&#xff1a;可包裹单个子部件&#xff08;通过 setWidget()&#xff09;&#xff0c;当子部件尺寸 > 视口时&a…
阅读更多...
Windows系统编程项目（一）进程管理器

Windows系统编程项目（一）进程管理器

本项目将通过MFC实现一个进程管理器&#xff0c;如下图详细信息页所示&#xff1a; 一.首先创建一个基于对话框的MFC项目&#xff0c;在静态库中使用MFC 二.在项目默认的对话框中添加一个列表 三.列表添加变量 四.初始化列表 1.设置列表风格和表头 2.填充列表内容 我们需要在…
阅读更多...
RAG-202502

RAG-202502

目录 RAG场景的坑知识等级金字塔 初级RAG存在的问题高级RAG索前优化检索优化检索后优化 优化经验总结参考 RAG场景的坑 晦涩的专业术语 误区&#xff1a;在专业领域中。许多文献和资料中充满了专业术语&#xff0c;这些术语对于非专业人士&#xff08;甚至是大模型&#xff0…
阅读更多...
CDN与群联云防护的技术差异在哪？

CDN与群联云防护的技术差异在哪？

CDN&#xff08;内容分发网络&#xff09;与群联云防护是两种常用于提升网站性能和安全的解决方案&#xff0c;但两者的核心目标和技术实现存在显著差异。本文将从防御机制、技术架构、适用场景和代码实现等方面详细对比两者的区别&#xff0c;并提供可直接运行的代码示例。 一…
阅读更多...
STM32-智能小车项目

STM32-智能小车项目

项目框图 ST-link接线 实物图&#xff1a; 正面&#xff1a; 反面&#xff1a; 相关内容 使用L9110S电机模块 电机驱动模块L9110S详解 | 良许嵌入式 测速模块 语音模块SU-03T 网站&#xff1a;智能公元/AI产品零代码平台 一、让小车动起来 新建文件夹智能小车项目 在里面…
阅读更多...
【Linux】vim 设置

【Linux】vim 设置

【Linux】vim 设置 零、起因 刚学Linux&#xff0c;有时候会重装Linux系统&#xff0c;然后默认的vi不太好用&#xff0c;需要进行一些设置&#xff0c;本文简述如何配置一个好用的vim。 壹、软件安装 sudo apt-get install vim贰、配置路径 对所有用户生效&#xff1a; …
阅读更多...
【Python爬虫(90)】以Python爬虫为眼，洞察金融科技监管风云

【Python爬虫(90)】以Python爬虫为眼，洞察金融科技监管风云

【Python爬虫】专栏简介&#xff1a;本专栏是 Python 爬虫领域的集大成之作&#xff0c;共 100 章节。从 Python 基础语法、爬虫入门知识讲起&#xff0c;深入探讨反爬虫、多线程、分布式等进阶技术。以大量实例为支撑&#xff0c;覆盖网页、图片、音频等各类数据爬取&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023