移动端小程序腾讯地图sdk 当前位置地址你解析距离计算

<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 当前位置地址你解析距离计算相关推荐

移动端H5 腾讯地图sdk 当前位置地址你解析距离计算
<template><view class="content"><view><input class="uni-input&qu ...
微信小程序 - 腾讯地图SDK
转自:https://github.com/qcomdd/qqmap-wx 微信小程序_腾讯地图SDK(在官方基础上增加路径规划功能) 以下为使用方法. // 引入SDK核心类本文件 var QQMa ...
微信小程序控制硬件第14篇微信小程序腾讯地图控制 4G Cat.1模组，安信可CA-01加载定位显示当前位置。
文章目录一.前言通讯协议技术问题点二.4G模组业务逻辑上报基站信息三.微信小程序控制另外,不要把我的博客作为学习标准,我的只是笔记,难有疏忽之处,如果有,请指出来,也欢迎留言哈! 微信物 ...
微信小程序map组件地图定位当前位置
小程序map组件的应用方式:简单版 wxml: <map id="map" latitude="{{latitude}}" longitude=" ...
小程序--腾讯地图导航
小程序点击地址导航功能首先必须去腾讯地图申请账号并开通权限地址:https://lbs.qq.com/dev/console/home 第一步: 申请完账号---------控制台--------- ...
高德地图小程序步行路线显示_微信小程序之：小程序接入高德地图SDK
前言最近在捣腾小程序,想开发一个自己的小程序,过一把独立开发的瘾. 自己设计,自己搞数据,自己找图标,自己决定要或者不要什么功能,完全跟着心走,目前体验下来,感觉还是蛮爽的.比在公司产品要你做什么你 ...
微信小程序-腾讯地图根据经纬度获取位置与根据位置获取经纬度
注意:如果request非法,请移步到上一篇博客填写request合法域名章节,上一篇博客末尾也有写道获取当前定位得方法一.根据经纬度获取位置信息登陆腾讯地图官网,选择控制台,选择开发文档- ...
uniapp 小程序用高德地图sdk
第一步:注册高德地图.下载微信小程序SDK 第二步:引入 sdk 文件第三步:使用高德地图方法获取当前位置在onload 里边 let that=this this.amap.getRege ...
微信小程序+腾讯地图获取定位与地图选点插件
文章目录一.思路二.逆地址解析 2.1. app.json 2.2. 页面加入 2.3. 后台代码三.地图插件调用 3.1. app.json加入 3.2. js页面加入 3.3. wxml页面 ...

移动端小程序腾讯地图sdk 当前位置地址你解析距离计算

移动端小程序腾讯地图sdk 当前位置地址你解析距离计算相关推荐

最新文章

热门文章

移动端小程序 腾讯地图sdk 当前位置 地址你解析 距离计算

移动端小程序 腾讯地图sdk 当前位置 地址你解析 距离计算相关推荐

最新文章

热门文章

移动端小程序腾讯地图sdk 当前位置地址你解析距离计算

移动端小程序腾讯地图sdk 当前位置地址你解析距离计算相关推荐