H5移动端获取腾讯地图计算两经纬度的实际距离（可批量）_多地打卡
⽂章⽬录
⽂档地址：
⼀、H5移动端
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 QQMapWX from '@/assets/js/qqmap-wx-jssdk.js'
3. 实例化
qqMap: new QQMapWX({
key: '腾讯申请的key',
vm: this
}),
4. ⼆点求距离
//计算⼆点之间的距离
calculateTwoPlaceDistance(){
const _this = this;
//调⽤距离计算接⼝
_this.qqMap.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 = sult.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(){
const that = this;
vuejson转对象//调⽤距离计算接⼝
that.qqMap.calculateDistance({
from: {
latitude: that.latitude,
longitude: that.longitude
},
to: WorkPlace, //strs为字符串，末尾的“；”要去掉
success: function(res){
// console.log("多地求距离->", res)
const moreWorkDistanceList =[];
const distanceList = sult.elements;
for(var i =0; i < distanceList.length; i++){
const distAddress = distanceList[i].distance;
// 把计算出来的距离放到数组容器中，等会统⼀计算
moreWorkDistanceList.push(distAddress)
// console.log("多地打卡数组追加元素->", moreWorkDistanceList);
}
/**
* 转换单位不利于计算，统⼀⽤m单位，⼀起计算，求出数组中最⼩的⼀个，最后和设定的办公距离（愿），⽐较⼤⼩；          * 1.如果⼩于设置距离，属于考勤范围内
* 2.如果⼤于设置距离，属于外勤范围
*/
// console.log("多地打卡地与当前位置距离数组:" + WorkDistanceListTemp);
alert("多地打卡地与当前位置距离容器:" + WorkDistanceListTemp)
},
fail: function(res){
// console.log("求距离发⽣异常->", res);
},
complete: function(res){
// console.log("求距离执⾏完成->", res)
}
})
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。