H5 移动端获取腾讯地图计算两经纬度的实际距离（可批量）

文章目录

一、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 移动端获取腾讯地图计算两经纬度的实际距离（可批量）_多地打卡相关推荐

小程序获取腾讯地图计算两经纬度的实际距离（可批量）_多地打卡
文章目录一.小程序 1. 安装vue-jsonp 2. 引入腾讯sdk 3. 实例化 4. 二点求距离 5. 多点求距离文档地址: https://lbs.qq.com/service/webSe ...
uni-app获取腾讯地图计算两经纬度的实际距离（可批量）
地址 https://lbs.qq.com/service/webService/webServiceGuide/webServiceDistance getDistance() {uni.reque ...
经纬度计算距离html,js版谷歌地图计算两经纬度坐标点的距离
球面上两点间大圆劣弧的距离html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
java版谷歌地图计算两经纬度坐标点的距离
球面上两点间大圆劣弧的距离 public class GoogleMapHelper {private static double EARTH_RADIUS = 6378.137; //地球半径//将 ...
Java 计算两经纬度间的距离
之前在开发一个自动售货机设备,在投入生产使用时,使用到了根据经纬度计算出当前位置和目标位置的直线距离,这个距离不是路程距离,只是两坐标的直线距离,仅供参考.实际运用还要具体业务具体实现. 下面是实现两 ...
vue PC 端使用腾讯地图定位
vue PC 端使用腾讯地图定位需求:希望网站显示当前城市腾讯前端定位组件解决的方法定义一个文件,加载定位js 在vue页面中使用需求:希望网站显示当前城市腾讯前端定位组件 key的申请, ...
微信端唤起腾讯地图并进行导航
微信端唤起腾讯地图并进行导航 $('.companyAdress').on('click',function(){ window.location.href= 'http://apis.map. ...
uniapp小程序端使用腾讯地图
一.获取腾讯地图密钥 1. 找到腾讯地图API 腾讯地图A地址PI 注册并登录后点击开发文档选择微信小程序JavaScript SDK 进入后按照 Hello world! 中的步骤进行 2. 申请密 ...
Android 高德地图根据地址获取经纬度，计算两个坐标的距离
1.到高德开放平台申请,获取key 高德开放平台:https://lbs.amap.com/ 2.下载高德定位及地址搜索SDK:https://download.csdn.net/download/m ...

H5 移动端获取腾讯地图计算两经纬度的实际距离（可批量）_多地打卡

文章目录

一、H5移动端

1. 安装vue-jsonp

2. 引入腾讯sdk

3. 实例化

4. 二点求距离

5. 多点求距离

H5 移动端获取腾讯地图计算两经纬度的实际距离（可批量）_多地打卡相关推荐

最新文章

热门文章

H5 移动端 获取腾讯地图计算两经纬度的实际距离（可批量）_多地打卡

文章目录

一、H5移动端

1. 安装vue-jsonp

2. 引入腾讯sdk

3. 实例化

4. 二点求距离

5. 多点求距离

H5 移动端 获取腾讯地图计算两经纬度的实际距离（可批量）_多地打卡相关推荐

最新文章

热门文章

H5 移动端获取腾讯地图计算两经纬度的实际距离（可批量）_多地打卡

H5 移动端获取腾讯地图计算两经纬度的实际距离（可批量）_多地打卡相关推荐