文章目錄

• • • • • 一、H5移動端
        • • 1. 安裝vue-jsonp
          • 2. 引入騰訊sdk
          • 3. 實例化
          • 4. 二點求距離
          • 5. 多點求距離

文檔地址：
https://lbs.qq.com/service/webService/webServiceGuide/webServiceDistance

一、H5移動端

1. 安裝vue-jsonp

npm i -S vue-jsonp

main.js

//解決跨域 import {VueJsonp} from 'vue-jsonp' Vue.use(VueJsonp)

2. 引入騰訊sdk

直接使用小程序的sdk會有跨域問題，因此，此sdk，根據小程序sdk修改而成的

下載鏈接：https://gitee.com/gblfy/qywx-vue2-vant-h5/tree/master/src/assets/js/qqmap-wx-jssdk.js

引入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 = 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() {const that = this;//調用距離計算接口that.qqMap.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)}})},

總結

以上是生活随笔為你收集整理的H5 移动端 获取腾讯地图计算两经纬度的实际距离（可批量）_多地打卡的全部內容，希望文章能夠幫你解決所遇到的問題。

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