hookehuyr

fix 工具地图新增复制坐标功能

1 <!-- 1 <!--
2 * @Date: 2023-05-19 14:54:27 2 * @Date: 2023-05-19 14:54:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-08-07 09:54:06 4 + * @LastEditTime: 2024-09-20 11:23:33
5 * @FilePath: /map-demo/src/views/tools.vue 5 * @FilePath: /map-demo/src/views/tools.vue
6 * @Description: 公众地图主体页面 6 * @Description: 公众地图主体页面
7 --> 7 -->
...@@ -18,8 +18,8 @@ ...@@ -18,8 +18,8 @@
18 <van-button @click="setRotationPlus()" type="default" block size="small" style="width: 10rem; margin-left: 1rem;">旋转+10</van-button> 18 <van-button @click="setRotationPlus()" type="default" block size="small" style="width: 10rem; margin-left: 1rem;">旋转+10</van-button>
19 &nbsp;设置<van-field v-model="data_rotation" label="" placeholder="请输入旋转值" style="width: 3.5rem;" @blur="setRotation()" />度 19 &nbsp;设置<van-field v-model="data_rotation" label="" placeholder="请输入旋转值" style="width: 3.5rem;" @blur="setRotation()" />度
20 </div> 20 </div>
21 - <div v-if="log_lnglat" style="position: fixed; top: 5rem; left: 1rem; color: black;"> 21 + <div v-if="log_lnglat" style="position: fixed; top: 5rem; left: 1rem; color: black; background-color: white; padding: 1rem;">
22 - <div style="display: flex;">点击经纬度:{{ log_lnglat }}</div> 22 + <div style=" display: flex; align-items: center; justify-content: center;">经纬度:{{ log_lnglat }}&nbsp;&nbsp;&nbsp;<van-button @click="copyText(log_lnglat)" type="primary" icon="brush-o" size="small">复制</van-button></div>
23 </div> 23 </div>
24 <!-- <div class="nav-bar-wrapper"> 24 <!-- <div class="nav-bar-wrapper">
25 <div class="hideScrollBar nav-bar-content"> 25 <div class="hideScrollBar nav-bar-content">
...@@ -125,6 +125,7 @@ import audioBackground from '@/components/audioBackground' ...@@ -125,6 +125,7 @@ import audioBackground from '@/components/audioBackground'
125 import { useRect } from '@vant/use'; 125 import { useRect } from '@vant/use';
126 import { mapAPI } from '@/api/map.js' 126 import { mapAPI } from '@/api/map.js'
127 import wx from 'weixin-js-sdk' 127 import wx from 'weixin-js-sdk'
128 +import { showToast } from 'vant';
128 129
129 const GPS = { 130 const GPS = {
130 PI: 3.14159265358979324, 131 PI: 3.14159265358979324,
...@@ -955,7 +956,7 @@ export default { ...@@ -955,7 +956,7 @@ export default {
955 e.lnglat.getLng() + 956 e.lnglat.getLng() +
956 "," + 957 "," +
957 e.lnglat.getLat() + 958 e.lnglat.getLat() +
958 - "]," 959 + "]"
959 console.log(text); 960 console.log(text);
960 this.log_lnglat = text; 961 this.log_lnglat = text;
961 // 点击空白处 关闭弹框 962 // 点击空白处 关闭弹框
...@@ -1225,7 +1226,17 @@ export default { ...@@ -1225,7 +1226,17 @@ export default {
1225 }, 1226 },
1226 setRotation () { 1227 setRotation () {
1227 this.map.setRotation(+this.data_rotation); 1228 this.map.setRotation(+this.data_rotation);
1228 - } 1229 + },
1230 + copyText (text) {
1231 + navigator.clipboard.writeText(text)
1232 + .then(() => {
1233 + showToast('复制成功');
1234 + })
1235 + .catch(err => {
1236 + showToast('复制失败');
1237 + console.error('复制失败:', err);
1238 + });
1239 + },
1229 } 1240 }
1230 } 1241 }
1231 </script> 1242 </script>
......