关于计算2点之间的距离都依赖了腾讯地图,所以请先在腾讯地图官网申请key。具体流程看下图:

下面具体讲计算2点之间距离的方法。

方法一:

1.通过 wx.getLocation(Object object)  获取用户当前的经度,纬度:

getPosition: function () {
var that = this;
wx.getLocation({
success: function (res) {
that.setData({
fromLng: res.longitude,
fromLat: res.latitude
})
}
})
},

2.通过腾讯地图 逆解析 你的目的地地址,获取经度,纬度:

wx.request({
url: 'https://apis.map.qq.com/ws/geocoder/v1/',
data: {
"key": "你的腾讯地图 key",
"address": "目的地"
},
method: 'GET',
success: function (res) {
if (res.data.result) {
const addressLocation = res.data.result.location;
const courseLat = addressLocation.lat;//获取目的地的纬度
const courseLng = addressLocation.lng;//获取目的地的经度
}
that.setData({
toLat: courseLat,
toLng:courseLng
})
}
})

3.定义 计算距离的 方法:

getDistance: function(lat1, lng1, lat2, lng2) {
lat1 = lat1 || 0;
lng1 = lng1 || 0;
lat2 = lat2 || 0;
lng2 = lng2 || 0; var rad1 = lat1 * Math.PI / 180.0;
var rad2 = lat2 * Math.PI / 180.0;
var a = rad1 - rad2;
var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
var r = 6378137;
var distance = r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) * Math.pow(Math.sin(b / 2), 2))); return distance;
}

4.调用该方法:

getDistance(fromLng,fromLat,toLat,toLng)

我需要同时计算多条数据的距离,我发现在遍历返回目的地经纬度的时候,它返回来的结果并不是按照你列表的顺序返回来的,而且有些地址还解析不出来。

不知道是我的写法有问题,还是接口调用的问题。如果哪位大神看到网上有这种示例,麻烦提供一下链接给我,借鉴学习一下~后面我采取的是下面这种方法:

方法二:通过腾讯地图的距离计算接口

1.跟方法一第1步一样,获取用户的接口权限;

2.把 qqmap-wx-jssdk.min.js 加到你小程序;

3.在需要计算距离的js页面引用 qmap-wx-jssdk.min.js ,并实例化该对象:

const QQMapWX = require('../../lib/js/qqmap-wx-jssdk.min.js');
var qqmapsdk; onLoad: function (options) {
// 实例化API核心类
qqmapsdk = new QQMapWX({
key: 'VBXBZ-YVGRW-2Z4RK-O6H27-WEXUT-3ZB2M'
});
},

4.先逆解析目的地,再调用计算距离的接口

wx.request({
url: 'https://apis.map.qq.com/ws/geocoder/v1/',
data: {
"key": "你的key",
"address": "目的地名称"
},
method: 'GET',
success: function (res) {
if (res.data.result) {
const addressLocation = res.data.result.location;
const courseLat = addressLocation.lat;
const courseLng = addressLocation.lng;
let destinationDistance;
qqmapsdk.calculateDistance({
to: [{
latitude: courseLat,
longitude: courseLng
}],
success: function (res) {
destinationDistance = res.result.elements[0].distance;
let distanceKm = `${(destinationDistance/1000).toFixed(2)}Km`;//转换成km
that.setData({
distance: distanceKm
})
},
fail: function (res) {
console.log(res);
}
});
}
}
})

注意腾讯地图的请求限制:

微信小程序——计算2点之间的距离的更多相关文章

  1. 微信小程序计算经纬距离

    微信小程序计算经纬距离 微信小程序计算两点间的距离 getDistance: function (lat1, lng1, lat2, lng2) { lat1 = lat1 || 0; lng1 = ...

  2. 微信小程序-02-项目文件之间配合和调用关系

    微信小程序-02-项目文件之间配合和调用关系 我就不说那么多了,我是从官方文档拷贝的,然后加上一些自己的笔记,不喜勿喷 官方文档:https://developers.weixin.qq.com/mi ...

  3. 微信小程序--页面与组件之间如何进行信息传递和函数调用

    微信小程序--页面与组件之间如何进行信息传递和函数调用 ​ 这篇文章我会以我自己开发经验从如下几个角度来讲解相关的内容 页面如何向组件传数据 组件如何向页面传数据 页面如何调用组件内的函数 组件如何调 ...

  4. 微信小程序详解——页面之间的跳转方式【路由】和参数传递

    微信小程序拥有web网页和Application共同的特征,我们的页面都不是孤立存在的,而是通过和其他页面进行交互,来共同完成系统的功能.今天我们来研究小程序页面之间的跳转方式. 1.先导 在Andr ...

  5. 微信小程序计算金额长度异常解决办法

    今天在做微信小程序,在测试的时候偶然出现了一些问题,如下图. 心中的一阵不爽猛然袭来,完全是搞事情哈! 然后经过一番探索,用toFixed方法搞定了,此方法是对值进行四舍五入的. 解决后点了一大堆控制 ...

  6. 微信小程序 - 输入起点、终点获取距离并且进行路线规划(腾讯地图)

    更新: 2018-9-19 腾讯官方经纬度转详细地址,详细地址转经纬度 index.wxml <!--地图容器--> <map id="myMap" style= ...

  7. [微信小程序]计算自己手机到指定位置的距离

    目的: 根据目的地的坐标计算自己手机的位置离目的地的距离的 核心思路: 后续操作必须等所有异步请求都返回了才能继续 使用 const qqmap = require("../../utils ...

  8. 微信小程序组件设计规范

    微信小程序组件设计规范 组件化开发的思想贯穿着我开发设计过程的始终.在过去很长一段时间里,我都受益于这种思想. 组件可复用 - 减少了重复代码量 组件做为抽离的功能单元 - 方便维护 组件作为temp ...

  9. 深入分析:微信小程序与H5的区别

    作为前端工程师,从前端的视角,为大家分析下微信小程序和HTML5与之间的主要区别 第一条是运行环境的不同. 传统的HTML5的运行环境是浏览器,包括webview,而微信小程序的运行环境并非完整的浏览 ...

随机推荐

  1. WCF 有零个操作;协定必须至少有一个操作

    转自 http://www.cnblogs.com/bdqlaccp/archive/2011/12/31/2308905.html 建立WCF服务后, 服务类中写上了相应的操作,并且方法上加上了[O ...

  2. Android App开发技能图谱(转载)

    操作系统 Windows/MacOSX/Linux 编程语言 Java HTML/JS (Hybrid/Web App) C/C++ (NDK) SQL (DB) Kotlin 开发工具 IDE An ...

  3. 为jqgrid添加统计金额页脚

    为jqgrid增加自定义用户数据 设计统计的金额总和 最后在jgrid组件中添加 最后的效果为:

  4. SSO单点登录的发展由来以及实现原理

    单点登录以及权限,在很早之前都有写过,不过都比较简单,今天就具体说一下,以及下一步要做的 1.web单系统应用 早期我们开发web应用都是所有的包放在一起打成一个war包放入tomcat容器来运行的, ...

  5. Atitit js es5 es6新特性 attilax总结

    Atitit js es5 es6新特性 attilax总结 1.1. JavaScript发展时间轴:1 1.2. 以下是ES6排名前十的最佳特性列表(排名不分先后):1 1.3. Es6 支持情况 ...

  6. 【Android】1.2 创建Android模拟器

    分类:C#.Android.VS2015:  创建日期:2016-01-20 调试手机应用程序一般先用模拟器来实现,只是因为每次都发布到手机上调试太麻烦了.当应用程序在模拟器上调试没错后,再发布到手机 ...

  7. Java泛型经典文章收集

    https://blog.csdn.net/s10461/article/details/53941091 Java泛型详解(从基础到入门)https://blog.csdn.net/jeffleo/ ...

  8. 解密DNSPOD应对DDoS攻击招式!

    最近,安全专家Incapsula在最新版<DDoS威胁环境报告>指出.现在实施DDoS攻击的人仅仅有两类:一类是专业网络黑客.而还有一类就是所谓的botter. 简言之,booter就是僵 ...

  9. android 去掉标题栏、状态栏、横屏

    // 去掉标题栏 supportRequestWindowFeature(Window.FEATURE_NO_TITLE); // 全屏.隐藏状态栏 getWindow().setFlags(Wind ...

  10. (原创)一个简洁通用的调用DLL函数的帮助类

    本次介绍一种调用dll函数的通用简洁的方法,消除了原来调用方式的重复与繁琐,使得我们调用dll函数的方式更加方便简洁.用过dll的人会发现c++中调用dll中的函数有点繁琐,调用过程是这样的:在加载d ...