1

package.json

@@ -17,18 +17,19 @@
     "@riophae/vue-treeselect": "^0.4.0",
     "axios": "0.18.1",
     "core-js": "3.6.5",
-    "element-ui": "2.13.2",
     "echarts": "^5.0.0",
+    "element-ui": "2.13.2",
     "js-cookie": "2.2.0",
+    "moment": "^2.29.4",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
     "vant": "^2.13.2",
     "vue": "2.6.10",
+    "vue-jsonp": "^2.0.0",
     "vue-router": "3.0.6",
     "vuex": "3.1.0",
-    "vxe-table": "^3.8.22",
-    "moment": "^2.29.4"
+    "vxe-table": "^3.8.22"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.4",

src/main.js

@@ -68,6 +68,9 @@ import moment from 'moment'
 moment.locale('zh-cn')
 Vue.prototype.$moment = moment;
 
+import { VueJsonp } from 'vue-jsonp'
+Vue.use(VueJsonp)
+
 import { setToken,getToken } from "@/utils/auth"
 if(window.top !== window.self) {
   // 当前页面在iframe中

src/views/attendance/index.vue

@@ -7,7 +7,9 @@
         </button>
         <div class="sign-statsu">
           <div>打卡状态 <el-tag size="small" effect="dark" type="primary">{{ isGetLocation ? '可打卡' : '不可打卡' }}</el-tag></div>
-          <div>当前位置： <span v-if="isGetLocation">（{{pos.lng}},{{pos.lat}}）</span></div>
+          <div>当前位置： <span v-if="isGetLocation">
+            <el-tag size="small" type="primary" effect="dark">{{pos.address}}</el-tag>
+            （{{pos.lng}},{{pos.lat}}）</span></div>
           <div>当前距离：</div>
           <div>最大打卡范围：</div>
         </div>
@@ -22,6 +24,7 @@
 import { sign } from '@/api/attendance'
 import { throttle } from '@/utils'
 import MonthStatics from './components/MonthStatics'
+import axios from "axios";
 export default {
   components: {
     MonthStatics
@@ -31,7 +34,8 @@ export default {
       isGetLocation: false,
       pos: {
         lng: '',
-        lat: ''
+        lat: '',
+        address: ''
       }
     }
   },
@@ -39,7 +43,10 @@ export default {
   methods: {
     clockIn: throttle(async function() {
       try {
-        const res = await sign()
+        const res = await sign({
+          location: `${this.pos.lng},${this.pos.lat}`,
+          address: this.pos.address
+        })
         console.log(res)
       } catch (err) {
         console.error(err)
@@ -54,6 +61,28 @@ export default {
         this.getLocation()
       }
     },
+    async pos2Address(lat, lng) {
+      try {
+        // const res = await axios.get('https://apis.map.qq.com/ws/geocoder/v1/',{
+        //   params: {
+        //     location: lat + "," + lng,
+        //     key: "D5EBZ-C3BWP-HZIDG-VO6BE-P2MN5-ESFZO",
+        //     output: "jsonp"
+        //   },
+        // })
+        const res = await this.$jsonp('https://apis.map.qq.com/ws/geocoder/v1/',{
+          location: lat + "," + lng,
+          key: "D5EBZ-C3BWP-HZIDG-VO6BE-P2MN5-ESFZO",
+          output: "jsonp"
+        })
+        console.log(res)
+        if(!res.status) {
+          this.pos.address = res.result.address
+        }
+      } catch (err) {
+        console.error(err)
+      }
+    },
     getLocation() {
       navigator.geolocation.getCurrentPosition((pos) => {
         this.isGetLocation = true
@@ -61,6 +90,9 @@ export default {
         console.log('纬度', pos.coords.longitude);
         this.pos.lng = pos.coords.longitude
         this.pos.lat = pos.coords.latitude
+        if(this.pos.lat && this.pos.lng && this.isGetLocation) {
+          this.pos2Address(this.pos.lat, this.pos.lng)
+        }
       }, (error) => {
         console.log(error)
         if (error.code) {