新增点击查看复制经纬度功能

 {
 {
   "globals": {
   "globals": {
     "EffectScope": true,
     "EffectScope": true,
+    "ElMessage": true,
     "computed": true,
     "computed": true,
     "createApp": true,
     "createApp": true,
     "customRef": true,
     "customRef": true,

@@ -2,6 +2,7 @@
 export {}
 export {}
 declare global {
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
   const EffectScope: typeof import('vue')['EffectScope']
+  const ElMessage: typeof import('element-plus/es')['ElMessage']
   const computed: typeof import('vue')['computed']
   const computed: typeof import('vue')['computed']
   const createApp: typeof import('vue')['createApp']
   const createApp: typeof import('vue')['createApp']
   const customRef: typeof import('vue')['customRef']
   const customRef: typeof import('vue')['customRef']

 <!--
 <!--
  * @Date: 2025-01-22 11:40:12
  * @Date: 2025-01-22 11:40:12
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-01-24 16:57:47
+ * @LastEditTime: 2025-01-24 17:33:54
  * @FilePath: /map-demo/src/views/mapCutter.vue
  * @FilePath: /map-demo/src/views/mapCutter.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
@@ -63,20 +63,25 @@
     <el-button type="primary" @click="rotateMap(10)">地图顺时针旋转</el-button>
     <el-button type="primary" @click="rotateMap(10)">地图顺时针旋转</el-button>
     <el-button type="primary" @click="rotateMap(-10)">地图逆时针旋转</el-button>
     <el-button type="primary" @click="rotateMap(-10)">地图逆时针旋转</el-button>
   </div>
   </div>
+
+  <div v-if="log_lnglat" style="position: fixed; top: 8rem; left: 1rem; color: black; background-color: white; padding: 1rem;">
+    <div style=" display: flex; align-items: center; justify-content: center;">经纬度：{{ log_lnglat }}&nbsp;&nbsp;&nbsp;<el-button @click="copyText(log_lnglat)" type="primary" :icon="Brush"  size="small">复制</el-button></div>
+  </div>
 </template>
 </template>
 
 
 <script setup>
 <script setup>
 import { onMounted, ref, computed } from "vue";
 import { onMounted, ref, computed } from "vue";
 // import AMapLoader from "@amap/amap-jsapi-loader";
 // import AMapLoader from "@amap/amap-jsapi-loader";
 import { TileCutter } from "@/utils/TileCutter";
 import { TileCutter } from "@/utils/TileCutter";
-import { Top, Bottom, Back, Right, Plus, Minus } from '@element-plus/icons-vue'
+import { Top, Bottom, Back, Right, Plus, Minus, Brush } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
 
 
 const map = ref(null);
 const map = ref(null);
 const imageLayer = ref(null);
 const imageLayer = ref(null);
 const imageURL = ref(""); // 存储上传的图片
 const imageURL = ref(""); // 存储上传的图片
 const bounds = ref(null); // 图片覆盖的边界
 const bounds = ref(null); // 图片覆盖的边界
 const mapRotation = ref(0); // 存储地图旋转角度
 const mapRotation = ref(0); // 存储地图旋转角度
-const zooms = ref([17, 18]);
+const zooms = ref([17, 19]);
 
 
 const map_zoom = ref(17)
 const map_zoom = ref(17)
 
 
@@ -96,6 +101,8 @@ const map_right_top_range = ref(null); // 120.591047,31.318265
 
 
 const map_center = ref(null);
 const map_center = ref(null);
 
 
+const log_lnglat = ref('') // 获取当前地址经纬度
+
 onMounted(async () => {
 onMounted(async () => {
   loadMap();
   loadMap();
 });
 });
@@ -138,14 +145,17 @@ function loadMap() {
   layer1.setMap(map.value);
   layer1.setMap(map.value);
 
 
   // 监听 zoomchange 事件
   // 监听 zoomchange 事件
-  map.value.on('zoomchange', () => {
-    const currentZoom = map.value.getZoom();
-    if (currentZoom === 18) {
-      map_zoom.value = 18;
-    } else {
-      map_zoom.value = 17;
-    }
-  });
+  // map.value.on('zoomchange', () => {
+  //   const currentZoom = map.value.getZoom();
+  //   if (currentZoom === 18) {
+  //     map_zoom.value = 18;
+  //   } else {
+  //     map_zoom.value = 17;
+  //   }
+  // });
+
+  // 添加地图点击事件
+  map.value.on("click", showInfoClick);
 }
 }
 
 
 function handleImageUpload(event) {
 function handleImageUpload(event) {
@@ -170,7 +180,7 @@ function addImageToMap(url) {
   imageLayer.value = new AMap.ImageLayer({
   imageLayer.value = new AMap.ImageLayer({
     url: url,
     url: url,
     bounds: bounds.value,
     bounds: bounds.value,
-    zooms: [17, 18],
+    zooms: [17, 19],
     opacity: 0.6 // 透明度 (0 完全透明, 1 完全不透明)
     opacity: 0.6 // 透明度 (0 完全透明, 1 完全不透明)
   });
   });
 
 
@@ -244,7 +254,7 @@ const rotateMap = (deltaAngle) => {
 
 
 
 
 const onZoomChange = (value) => { // 调整地图图层
 const onZoomChange = (value) => { // 调整地图图层
-  map.value.setZoom(value);
+  // map.value.setZoom(value);
 }
 }
 
 
 const onLBRangeBlur = () => {
 const onLBRangeBlur = () => {
@@ -267,6 +277,34 @@ const onCenterBlur = () => {
   const formattedArray = str.split(',').map(Number);
   const formattedArray = str.split(',').map(Number);
   map.value.setCenter(formattedArray);
   map.value.setCenter(formattedArray);
 }
 }
+
+const showInfoClick = (e) => {
+  var text =
+    e.lnglat.getLng() +
+    "," +
+    e.lnglat.getLat()
+  console.log(text);
+  log_lnglat.value = text;
+}
+
+const copyText = (text) => {
+  navigator.clipboard.writeText(text)
+  .then(() => {
+    ElMessage({
+      message: '复制成功',
+      type: 'success',
+      plain: true,
+    })
+  })
+  .catch(err => {
+    ElMessage({
+      message: '复制失败',
+      type: 'warning',
+      plain: true,
+    })
+    console.error('复制失败:', err);
+  });
+}
 </script>
 </script>
 
 
 <style>
 <style>