文章目錄

• • • • • 一、小程序
        • • 1. 安裝vue-jsonp
          • 2. 引入騰訊sdk
          • 3. 實(shí)例化
          • 4. 二點(diǎn)求距離
          • 5. 多點(diǎn)求距離

文檔地址：
https://lbs.qq.com/service/webService/webServiceGuide/webServiceDistance
申請開發(fā)者密鑰（key）： 申請密鑰

一、小程序

1. 安裝vue-jsonp

npm i -S vue-jsonp

main.js

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

2. 引入騰訊sdk

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

下載鏈接：qqmap-wx-jssdk1.2.zip

引入qqmap-wx-jssdk.js

// 根據(jù)自己實(shí)際項(xiàng)目的位置引用文件 import qqmapsdk from '../../utils/qqmap-wx-jssdk.min.js';

3. 實(shí)例化

再具體的方法內(nèi)部聲明

// 實(shí)例化騰訊地圖API核心類 const QQMapWX = new qqmapsdk({key: '騰訊申請的key' // 必填 });

4. 二點(diǎn)求距離

//計(jì)算二點(diǎn)之間的距離calculateTwoPlaceDistance() {// 實(shí)例化騰訊地圖API核心類const QQMapWX = new qqmapsdk({key: '騰訊申請的key' // 必填});const _this = this;//調(diào)用距離計(jì)算接口QQMapWX.calculateDistance({//mode: 'driving',//可選值：'driving'（駕車）、'walking'（步行），不填默認(rèn)：'walking',可不填//from參數(shù)不填默認(rèn)當(dāng)前地址//獲取表單提交的經(jīng)緯度并設(shè)置from和to參數(shù)（示例為string格式）// from: e.detail.value.start || '', //若起點(diǎn)有數(shù)據(jù)則采用起點(diǎn)坐標(biāo)，若為空默認(rèn)當(dāng)前地址// to: e.detail.value.dest, //終點(diǎn)坐標(biāo)mode: "straight",from: "39.77466,116.55859", //當(dāng)前位置的經(jīng)緯度to: "39.775091,116.56107", //辦公地點(diǎn)經(jīng)緯度 "北京市通州區(qū)經(jīng)海三路137號(hào)"success: (res) => { //成功后的回調(diào)// 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";}//轉(zhuǎn)換成公里else {hw = (hw / 2 / 500).toFixed(2) + "km";}} else {hw = "距離太近或請刷新重試";}// console.log("當(dāng)前位置與辦公地點(diǎn)距離:" + hw);alert("當(dāng)前位置與辦公地點(diǎn)距離:" + hw)},});},

5. 多點(diǎn)求距離

多點(diǎn)與當(dāng)前經(jīng)緯度之間的距離（計(jì)算當(dāng)前經(jīng)緯度和多地打卡地經(jīng)緯度之間的距離）

//多點(diǎn)與當(dāng)前經(jīng)緯度之間的距離（計(jì)算當(dāng)前經(jīng)緯度和多地打卡地經(jīng)緯度之間的距離）calculateMorePlaceDistance() {// 實(shí)例化騰訊地圖API核心類const QQMapWX = new qqmapsdk({key: '騰訊申請的key' // 必填});const that = this;//調(diào)用距離計(jì)算接口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;// 把計(jì)算出來的距離放到數(shù)組容器中，等會(huì)統(tǒng)一計(jì)算moreWorkDistanceList.push(distAddress)// console.log("多地打卡數(shù)組追加元素->", moreWorkDistanceList);}/*** 轉(zhuǎn)換單位不利于計(jì)算，統(tǒng)一用m單位，一起計(jì)算，求出數(shù)組中最小的一個(gè)，最后和設(shè)定的辦公距離（愿），比較大小；* 1.如果小于設(shè)置距離，屬于考勤范圍內(nèi)* 2.如果大于設(shè)置距離，屬于外勤范圍*/that.moreWorkDistanceListTemp = moreWorkDistanceList// console.log("多地打卡地與當(dāng)前位置距離數(shù)組:" + that.moreWorkDistanceListTemp);alert("多地打卡地與當(dāng)前位置距離容器:" + that.moreWorkDistanceListTemp)},fail: function(res) {// console.log("求距離發(fā)生異常->", res);},complete: function(res) {// console.log("求距離執(zhí)行完成->", res)}})},

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。