小程序 获取腾讯地图计算两经纬度的实际距离(可批量)_多地打卡
文章目录一、H5移动端1. 安装vue-jsonp2. 引入腾讯sdk3. 实例化4. 二点求距离5. 多点求距离文档地址:https://lbs.qq.com/service/webService/webServiceGuide/webServiceDistance一、H5移动端1. 安装vue-jsonpnpm i -S vue-jsonpmain.js//解决跨域import {VueJso
·
文档地址:
https://lbs.qq.com/service/webService/webServiceGuide/webServiceDistance
申请开发者密钥(key): 申请密钥
一、小程序
1. 安装vue-jsonp
npm i -S vue-jsonp
main.js
//解决跨域
import {VueJsonp} from 'vue-jsonp'
Vue.use(VueJsonp)
2. 引入腾讯sdk
直接使用小程序的sdk会有跨域问题,因此,此sdk,根据小程序sdk修改而成的
引入qqmap-wx-jssdk.js
// 根据自己实际项目的位置引用文件
import qqmapsdk from '../../utils/qqmap-wx-jssdk.min.js';
3. 实例化
再具体的方法内部声明
// 实例化腾讯地图API核心类
const QQMapWX = new qqmapsdk({
key: '腾讯申请的key' // 必填
});
4. 二点求距离
//计算二点之间的距离
calculateTwoPlaceDistance() {
// 实例化腾讯地图API核心类
const QQMapWX = new qqmapsdk({
key: '腾讯申请的key' // 必填
});
const _this = this;
//调用距离计算接口
QQMapWX.calculateDistance({
//mode: 'driving',//可选值:'driving'(驾车)、'walking'(步行),不填默认:'walking',可不填
//from参数不填默认当前地址
//获取表单提交的经纬度并设置from和to参数(示例为string格式)
// from: e.detail.value.start || '', //若起点有数据则采用起点坐标,若为空默认当前地址
// to: e.detail.value.dest, //终点坐标
mode: "straight",
from: "39.77466,116.55859", //当前位置的经纬度
to: "39.775091,116.56107", //办公地点经纬度 "北京市通州区经海三路137号"
success: (res) => { //成功后的回调
// debugger
// console.log(res);
let hw = res.result.elements[0].distance; //拿到距离(米)
// console.log("hw", hw);
if (hw && hw !== -1) {
if (hw < 1000) {
hw = hw + "m";
}
//转换成公里
else {
hw = (hw / 2 / 500).toFixed(2) + "km";
}
} else {
hw = "距离太近或请刷新重试";
}
// console.log("当前位置与办公地点距离:" + hw);
alert("当前位置与办公地点距离:" + hw)
},
});
},
5. 多点求距离
多点与当前经纬度之间的距离(计算当前经纬度和多地打卡地经纬度之间的距离)
//多点与当前经纬度之间的距离(计算当前经纬度和多地打卡地经纬度之间的距离)
calculateMorePlaceDistance() {
// 实例化腾讯地图API核心类
const QQMapWX = new qqmapsdk({
key: '腾讯申请的key' // 必填
});
const that = this;
//调用距离计算接口
QQMapWX.calculateDistance({
from: {
latitude: that.latitude,
longitude: that.longitude
},
to: that.moreWorkPlace, //strs为字符串,末尾的“;”要去掉
success: function(res) {
// console.log("多地求距离->", res)
const moreWorkDistanceList = [];
const distanceList = res.result.elements;
for (var i = 0; i < distanceList.length; i++) {
const distAddress = distanceList[i].distance;
// 把计算出来的距离放到数组容器中,等会统一计算
moreWorkDistanceList.push(distAddress)
// console.log("多地打卡数组追加元素->", moreWorkDistanceList);
}
/**
* 转换单位不利于计算,统一用m单位,一起计算,求出数组中最小的一个,最后和设定的办公距离(愿),比较大小;
* 1.如果小于设置距离,属于考勤范围内
* 2.如果大于设置距离,属于外勤范围
*/
that.moreWorkDistanceListTemp = moreWorkDistanceList
// console.log("多地打卡地与当前位置距离数组:" + that.moreWorkDistanceListTemp);
alert("多地打卡地与当前位置距离容器:" + that.moreWorkDistanceListTemp)
},
fail: function(res) {
// console.log("求距离发生异常->", res);
},
complete: function(res) {
// console.log("求距离执行完成->", res)
}
})
},
更多推荐
已为社区贡献25条内容
所有评论(0)