微信外卖小程序 怎么计算与客户的距离_微信小程序结合腾讯位置服务实现用户商家距离计算...
前言
小程序实操,距离计算总结。
思路
一共有两种方法,各有利弊:
1.利用小程序的wx.getLocation 方法得到用户的经纬度,然后用已知的商家的经纬进行计算;
2.利用腾讯地图位置服务calculateDistance直接计算;
先熟悉下两个单词:
longitude:经度;
latitude:纬度;
下边是两种方法的具体实现
一、获取用户的位置信息,再进行计算(wx.getLocation)
1.小程序提供了获取用户位置信息的api,所以我们能直接获取到经纬度;
2.在腾讯位置服务坐标拾取器,获取商家的具体经纬度(例:北京故宫博物院116.397027(经度),39.917990(纬度));
3.利用公式进行两点的经纬度计算,需注意:小程序默认坐标系是wgs84,您需设置为gcj02再试;
代码:
Page({
data:{
},
onLoad: function() {
var _this = this;
_this.findXy() //查询用户与商家的距离
},
findXy() { //获取用户的经纬度
var _this = this
wx.getLocation({
type: 'gcj02',
success(res) {
_this.getDistance(res.latitude, res.longitude, 39.917990,116.397027)
}
})
},
Rad: function(d) { //根据经纬度判断距离
return d * Math.PI / 180.0;
},
getDistance: function(lat1, lng1, lat2, lng2) {
// lat1用户的纬度
// lng1用户的经度
// lat2商家的纬度
// lng2商家的经度
var radLat1 = this.Rad(lat1);
var radLat2 = this.Rad(lat2);
var a = radLat1 - radLat2;
var b = this.Rad(lng1) - this.Rad(lng2);
var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
s = s * 6378.137;
s = Math.round(s * 10000) / 10000;
s = s.toFixed(2) + '公里' //保留两位小数
console.log('经纬度计算的距离:' + s)
return s
}
)}
二、利用腾讯地图的位置服务
1、先到腾讯位置服务注册登录,申请key、引入依赖。
下图的第三步配置是要在小程序的后台那里设置,记得不要找错地方了。如图:
2、配置完成了之后,小程序重新编译一下
3、求两点距离文档:腾讯位置-两点求距
4、读完可知,我们只需要商家的经纬度即可,我们在小程序里实验一下
// 引入SDK核心类
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
Page({
onLoad: function() {
var _this = this;
_this.findShop() //查询用户与商家的距离
},
findShop() { //拿到商家的地理位置,用到了腾讯地图的api
// 实例化API核心类
var _that = this
var demo = new QQMapWX({
key: '你申请到的key' // 必填
});
// 调用接口
demo.calculateDistance({
to: [{
latitude: 39.917990, //商家的纬度
longitude: 116.397027, //商家的经度
}],
success: function(res) {
let hw = res.result.elements[0].distance //拿到距离(米)
if (hw && hw !== -1) { //拿到正确的值
//转换成公里
hw = (hw / 2 / 500).toFixed(2) + '公里'
} else {
hw = "距离太近或请刷新重试"
}
console.log('腾讯地图计算距离商家' + hw);
}
});
}
})
可能会出现的错误:
{status:199,message:'此key未开启webservice功能'}
此时需要打开腾讯位置服务-key配置,设置一下刚才申请key的详情页面,把下列选项全部勾上,把你小程序的appid也写上,webservice域名白名单设置为空即可。
保存完,重新编译再试
作者:大师兄
来源:SegmentFault
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
微信外卖小程序 怎么计算与客户的距离_微信小程序结合腾讯位置服务实现用户商家距离计算...相关推荐
- uni-app开发微信小程使用腾讯位置服务获取用户的位置信息
uni-app开发微信小程使用腾讯位置服务获取用户的位置信息 一.开通腾讯位置服务 二.编码实现 (一)获取定位坐标 (二).在项目中使用 一.开通腾讯位置服务 在这里我们先要登录腾讯我i之服务的官网 ...
- 微信小程序结合腾讯位置服务获取用户所在城市信息
背景 实现小程序进去后获取用户当前所在城市,然后显示该城市的数据,并且显示在导航栏和 Tab上. 微信小程序中,我们可以通过调用wx.getLocation()获取到设备当前的地理位置信息,这个信息是 ...
- 腾讯位置服务+微信小程序,一文告诉你程序员为什么不会坐过站!
引言 1.1「腾讯位置服务」是什么? 立足生态,连接未来 腾讯位置服务平台依托庞大的数据生态,以定位.地图展示.地点搜索.路线规划.导航.室内图.海外图等位置服务能力和LBS大数据能力为基础,面向开发 ...
- 微信小程序使用腾讯位置服务地图选点实现地址的选取|微信小程序腾讯位置服务地图选点请求来源未被授权
效果图 首先要在微信开放平台的小程序里 添加插件 具体配置,可以参考官方文档 腾讯位置服务地图选点 | 小程序插件 | 微信公众平台 (qq.com) 同时还要申请接口的权限,不然小程序上线的时候不能 ...
- 微信小程序--引入腾讯位置服务插件
1.首先打开微信开发文档,点击组件---点击地图map 2.点击小程序地图插件可以查看 腾讯地图 操作指南 3.打开微信公众平台----打开第三方设置---设置----第三方设置---插件管理里面添加 ...
- 3分钟搞定微信小程序类美团用户商家距离计算
前言 小程序实操,距离计算总结. 思路 一共有两种方法,各有利弊: 1.利用小程序的wx.getLocation 方法得到用户的经纬度,然后用已知的商家的经纬进行计算; 2.利用腾讯地图位置服务cal ...
- 微信小程序类美团用户商家距离计算
前言 小程序实操,距离计算总结. 思路 一共有两种方法,各有利弊: 1.利用小程序的wx.getLocation 方法得到用户的经纬度,然后用已知的商家的经纬进行计算; 2.利用腾讯地图位置服务cal ...
- 计算两个经纬度之间的距离软件_小程序使用腾讯位置服务计算两地之间的距离(有源码)...
背景: 在最近的小程序开发中,需要计算当前位置到目标位置之间的距离.背靠"腾讯爸爸",没有理由不使用腾讯的位置服务啊!趁着周末把使用方式整理一下,还写了一个demo,和大家分享一下 ...
- 微信小程序,将经纬度转化为城市地区(腾讯位置服务)
第一步 小程序中需要通过getLocation方法获取地理位置 wx.getLocation({type: 'wgs84',success (res) {const latitude = res.la ...
最新文章
- 你值得拥有!更省钱地完成数据监听
- 成人怎么学计算机英语单词,成人怎么从零开始学英语单词
- 学python心得体会1000字-学习python cgi的一点心得体会
- 数据库笔记(数据库操作)
- 供应链商品域DDD实践
- JEECG Online开发教程专题视频-张代浩-专题视频课程
- android手机禁止休眠_浮窗----手机是否可以一心多用?这个只是开始而已。
- POJ 1451 T9 (字典树好题)
- 数据结构-树的进化及与数据库的关系
- MCSA / Windows Server 2016 PowerShell DSC
- 利用CDLinux里面的水滴破解路由器密码的教程
- 家电电子行业内卷严重,你还觉得单片机没用吗
- 雨林木风 ghost win7 纯净版系统下载
- 外地人在上海浦东 身份证到期续办
- MySQL — 数据库的基本概念、安装并配置MySQL、MySQL的基本使用、在项目中操作MySQL、前后端的身份认证
- java正则匹配英文_匹配英文句子的正则表达式
- 春林文件批量改名系统
- python日常实用小脚本-用Python编写渗透用小脚本 短小实用
- 华为云服务器快速迁移方案(最多十几分钟)
- 用4433法则+python代码筛选债券基金
热门文章
- 【Python】正负无穷
- 【记录】一段不知结果如何的“互联网+”比赛心路历程
- 科大星云诗社动态20201215
- [C++调试笔记]diag.cpp
- 谁有正版的matlab,matlab正版
- 关于iis部署的一些小问题
- 在js文件中引用别的js文件的方法
- 浅析ASP.NET的Page.IsPostBack 属性http://www.sina.com.cn 2008年05月06日 11:33 IT168.com
- OpenGL从入门到精通--纹理
- SpringBoot: xxxx for method parameter type String is not present]