<template><view><!-- 頂部通知欄 --><view v-if="showtime" class="showtime"><wyb-noticeBar:url="guideCallbackUrl"color="#666666":text="['異常處理提醒:',' 我為什么不能打卡、我的定位異常應該怎么處理？',]"/></view><!-- 打卡內容主體部分 --><!-- <view class="show-time" v-if="showtime" :style="{ height: deviceHeight }"> --><view class="show-time" v-if="showtime"><!-- <text class="show-time-text">今日您還沒簽到 若按鈕無反應、請打開定位功能</text> --><view class="sign-shell"><view class="sign-clock"><view>上班 09:00</view><view v-show="isNotClockk" class="signTime">未打卡</view><view v-show="!isNotClockk" :type="value" class="signTime">{{ signTime }}已打卡</view></view><view class="sign-clock2"><view>下班 17:00</view><view v-show="isNotClockk2" class="signTime">未打卡</view><view v-show="!isNotClockk2" class="signTime">{{ afterWorkTime }}已打卡</view></view></view><buttonclass="sign-button"open-type="getUserInfo"@getuserinfo="locationOnclick()"><view v-if="signFlag === 0">上班打卡</view><view v-else-if="signFlag === 1">下班打卡</view><view v-else>更新打卡</view><!-- 當前時間 15:11:15 --><view>{{ currentTime }}</view></button></view><!-- 底部當前日期 --><!-- <view class="bottom-date"> --><!-- <text class="index-container-text">{{ bottomCurrentDate }}</text> --><view class="index-place-box"><!-- 當前位置 默認顯示 橫杠 點擊騰訊地圖自動定位 --><view class="icon iconfont icon-location" @click="locationOnclick"><text class="index-container-box-text">當前位置：</text><text class="index-container-box-text2"> {{ place }}</text></view><!-- </view> --></view><!-- 簽到成功日歷組件 默認隱藏，當簽到成功時顯示 --><!-- <view v-if="!showtime" :style="{ height: deviceHeight }" class="content"> --><!-- 背景 --><!-- <view class="sign-showtime-bg"> </view><imt-calendar :selected="data"></imt-calendar></view> --></view> </template><script> // 引入簽到成功日歷組件 import imtCalendar from "components/imt-calendar/imt-calendar"; // 引入通知組件 import wybNoticeBar from "@/components/wyb-noticeBar/wyb-noticeBar.vue"; // 引入微信js sdk import qqmapsdk from "../../static/qqmap-wx-jssdk.min.js"; // 注冊定位插件 const chooseLocation = requirePlugin("chooseLocation"); export default {data() {return {value:'success',data: ["2022-01-01", "2022-01-01"],isNotClockk: true,isNotClockk2: true,// 記錄下班打卡時間afterWorkTime: "",// 記錄上班打卡時間signTime: "",dak_val: "",// 用戶輸入的值,json_data: "",// 是否顯示時間showtime: true,signFlag: 0,// 設備高度deviceHeight: Number,// 經緯度latitude: "", // 維度longitude: "", // 經度// 當前所處位置place: "------------------",// 底部當前日期 2022-01-05bottomCurrentDate: "",// 簽到的當前時間 15:21:21currentTime: "",guideCallbackUrl: "../../page_a/yichang/yichang",};},// 用戶點擊右上角分享onShareAppMessage: function (e) {return {title: "KJ打卡小程序",path: "pages/index/index",};},// 用戶點擊右上角分享onShareTimeline: function (e) {return {title: "KJ打卡小程序",path: "pages/index/index",};},methods: {// 簽到的當前時間 15:11:21longtime() {let times = new Date();let a, b, c;if (times.getHours() < 10) {a = "0" + times.getHours();} else {a = times.getHours();}if (times.getMinutes() < 10) {b = "0" + times.getMinutes();} else {b = times.getMinutes();}if (times.getSeconds() < 10) {c = "0" + times.getSeconds();} else {c = times.getSeconds();}// 返回當前時間this.currentTime = `${a}:${b}:${c}`;},// 底部當前日期currentDateOnclick() {let times = new Date();this.bottomCurrentDate = `${times.getFullYear()}-${times.getMonth() + 1}-${times.getDate()}`;},/*** 獲取經緯度信息+地址解析* 點擊當前位置和打卡按鈕觸發自動定位事件* 1.調用騰訊地圖* 2.獲取授權定位* 1>允許則進入騰訊地圖，進行自動定位* 2>不允許，則定位失敗**/locationOnclick() {// 新增 先創建實例const QQMapWX = new qqmapsdk({key: "JF7BZ-OEYEU-OD2VS-2XALL-VOMDE-7MFNU",});// 獲取當前的地理位置、速度// api 文檔：https://uniapp.dcloud.io/api/location/location?id=getlocationuni.getLocation({type: "wgs84",success: (res) => {this.longitude = res.longitude;this.latitude = res.latitude;console.log("獲取經緯度成功");console.log("當前位置的經度:", res.longitude);console.log("當前位置的緯度:", res.latitude);let key = "JF7BZ-OEYEU-OD2VS-2XALL-VOMDE-7MFNU"; //使用在騰訊位置服務申請的key;let referer = "KJ打卡"; //調用插件的app的名稱// 解析經緯度信息const location = JSON.stringify({latitude: this.latitude,longitude: this.longitude,});// 分類名稱const category = "生活服務,娛樂休閑";/*** 1.保留當前頁面，跳轉到應用內的某個頁面，使用uni.navigateBack可以返回到原頁面* https://uniapp.dcloud.io/api/router?id=navigateto** 2.微信小程序插件文檔* https://lbs.qq.com/miniProgram/plugin/pluginGuide/locationPicker*/wx.navigateTo({url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&location=${location}&category=${category}`,});},// 此處新增測試fail: () => {console.log("獲取經緯度失敗");},complete: () => {// 解析地址QQMapWX.reverseGeocoder({location: {latitude: this.latitude,longitude: this.longitude,},success: function (res) {console.log("解析地址成功");console.log(res);// 省let province = res.result.ad_info.province;// 市let city = res.result.ad_info.city;console.log(province);console.log(city);},fail: function (res) {uni.showToast({title: "定位失敗",duration: 2000,icon: "none",});console.log(res);},complete: function (res) {console.log(res);},});},// 新增end});},weixin() {uni.getUserInfo({success: (res) => {let username = JSON.parse(res.rawData);uni.setStorage({key: "xiaochengxu",data: username,success: () => {// this.showtime = false;let times = new Date();var new_time = `${times.getFullYear()}-${times.getMonth() + 1}-${times.getDate()}`;// 這里是給打卡日歷的容器push數據（打卡日歷組件會接收數據）let go_code = this.data.includes(new_time);this.data.push(new_time);// 不包含就存儲起來// uni.request({// data: {// pass: this.dak_val,// name: '0x96c88fa89ab9594b05dc3bfabfe01143',// },// // 這里需要修改// url: 'https://ani-qi.gitee.io/vue1.0/text.html',// });uni.setStorage({key: "data",data: this.data,});uni.setStorage({key: "showtime",data: false,});uni.showToast({title: "打卡成功",icon: "success",duration: 1500,});console.log("signFlag",this.signFlag)if (this.signFlag == 0) {// 上班打卡 打卡成功顯示 下班打卡this.signFlag = 1;this.isNotClockk = false;this.signTime = this.currentTime;} else {//下班打卡 打卡成功顯示 更新打卡this.signFlag = 2;this.isNotClockk2 = false;this.afterWorkTime = this.currentTime;}},});},});},// uni-app獲取騰訊地圖計算兩經緯度的實際距離（可批量）// 官方地址： https://lbs.qq.com/service/webService/webServiceGuide/webServiceDistancegetDistance() {uni.request({url: "https://apis.map.qq.com/ws/distance/v1/matrix", //僅為示例，并非真實接口地址。method: "GET",data: {mode: "walking",from: "39.775272,116.554588", //當前位置的經緯度to: "39.780864,116.567515", //辦公地點經緯度key: "JF7BZ-OEYEU-OD2VS-2XALL-VOMDE-7MFNU", //配置騰訊開發key},success: (res) => {console.log(res);let hw = res.data.result.rows[0].elements[0].distance; //拿到距離(米)if (hw && hw !== -1) {if (hw < 1000) {hw = hw + "m";}//轉換成公里else {hw = (hw / 2 / 500).toFixed(2) + "km";}} else {hw = "距離太近或請刷新重試";}console.log("當前位置與辦公地點距離:" + hw);},});},},// 監聽頁面初次渲染完成。注意如果渲染速度快，會在頁面進入動畫完成前觸發onReady() {// 單元測試 獲取騰訊地圖計算兩經緯度的實際距離（可批量）后期會移動到獲取經緯度以后，算法判斷中this.getDistance();uni.getStorage({key: "data",success: (res) => {this.data = res.data;console.log("接收數據傳遞后端res.data", res.data);},});// 底部日期this.currentDateOnclick();setInterval(() => {this.longtime();}, 1000);},// 監聽頁面加載，其參數為上個頁面傳遞的數據，參數類型為 Object（用于頁面傳參）// https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%E9%A1%B5%E9%9D%A2%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9FonLoad() {uni.getSystemInfo({success: (res) => {this.deviceHeight = res.windowHeight - 100 + "px";},});uni.getStorage({key: "showtime",success: (res) => {this.showtime = res.data;},fail(e) {},});},// 監聽頁面顯示。頁面每次出現在屏幕上都觸發，包括從下級頁面點返回露出當前頁面onShow() {if (this.showtime) {// 從地圖選點插件返回后，在頁面的onShow生命周期函數中能夠調用插件接口，取得選點結果對象// 如果點擊確認選點按鈕，則返回選點結果對象，否則返回nullconst location = chooseLocation.getLocation();if (chooseLocation.getLocation()) {this.place = location.address;// 獲取用戶信息this.weixin();}} else {const location = chooseLocation.getLocation();this.place = location.address;}},// 插件局部注冊components: {imtCalendar,wybNoticeBar,}, }; </script><style lang="scss" scoped> .sign-clock {margin-left: 11%; } .signTime {font-size: 26rpx; } .sign-clock2 {margin-left: 32%; }.sign-shell {display: flex;margin-top: 21%; } .index-container {position: absolute;left: 0;bottom: 0;width: 100%;text-align: center; } .title {font-size: 36rpx;color: #dfdfe6;text-align: center;margin: 45rpx; } .index-container-text {line-height: 100rpx;letter-spacing: 2px;color: #c8c7cc; } .index-container-box {display: flex;align-items: center;border-top: 1px solid #ebebeb;justify-content: space-around;height: 75rpx; } .index-container-box-text {color: #2c405a;font-weight: bold; } .index-container-box-text2 {color: #007aff;font-size: 25rpx;font-weight: bold;line-height: 75rpx; } .showtime {position: absolute;top: 0;left: 0; } // .show-time { // width: 100%; // display: flex; // text-align: center; // justify-content: space-around; // flex-direction: column; // align-items: center; // } .index-place-box {margin-left: 20%;margin-top: 25%; } .show-time-text {letter-spacing: 2px;font-size: 40rpx;color: #dfdfe6; }.sign-button {margin-top: 31% !important;background-color: #007aff;width: 320rpx;border-radius: 50%;display: flex;justify-content: center;align-items: center;color: white;margin-top: -50rpx;font-weight: 800;flex-direction: column;height: 320rpx; }.sign-showtime-bg {width: 100%;height: 375rpx;z-index: -99;position: absolute;left: 0;top: 0;background-color: #007aff;border-radius: 0 0 15px 15px; }page {overflow: hidden; }.content {margin-top: 80rpx; } </style>

總結

以上是生活随笔為你收集整理的移动端小程序 腾讯地图sdk 当前位置 地址你解析 距离计算的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。