3分钟搞定微信小程序类美团用户商家距离计算
前言
小程序实操,距离计算总结。
思路
一共有两种方法,各有利弊:
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 = thiswx.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 = thisvar 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域名白名单设置为空即可。
保存完,重新编译再试
作者:大师兄
链接:https://segmentfault.com/a/1190000017401316
来源:SegmentFault
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
3分钟搞定微信小程序类美团用户商家距离计算相关推荐
- 微信小程序类美团用户商家距离计算
前言 小程序实操,距离计算总结. 思路 一共有两种方法,各有利弊: 1.利用小程序的wx.getLocation 方法得到用户的经纬度,然后用已知的商家的经纬进行计算; 2.利用腾讯地图位置服务cal ...
- 一分钟搞定微信小程序定位(wx.getLocation)功能
欢迎大家来到我的一分钟系列,跟大家安利一分钟系列主要让大家快速完成一个功能少踩不必要的坑,先完成功能再悟其中的原理. 这期主要为大家提供微信小程序的定位功能.换不多说,直接上干货. 首先微信官方提供的 ...
- 5分钟搞定微信小程序搜索功能
一.废话不多说,先看效果: 附赠一个时间选择器: 看了效果图,当然要看看如何敲代码实现了~ 二.代码附上: 1.目录结构 2.全部代码: app.js //app.js App({globalData ...
- 终于搞定微信小程序canvas分享海报
canvas drawer 做微信小程序中最好用的 canvas 绘图组件之一. 当前环境下,大家都非常需要分享到朋友圈这个功能,但是实现起来各有心酸(坑比较多),所以才有了如下的 canvas 绘图 ...
- 用Markdown,3分钟搞定微信公众号文章排版!
用Markdown,3分钟搞定微信公众号文章排版! 还在使用第三方编辑器排版微信公众号文章?OUT了!只要你掌握本文推荐的3大操作流程,就可以熟练.高效的做好微信公众号文章排版,3分钟搞定!并且可以一 ...
- 机智云无需代码就能搞定IoT小程序开发和管理
基于机智云Aiot开发平台的新版开发者中心,无需代码就能搞定IoT小程序开发和管理.在信息技术不断更新升级的今天,与其紧密结合的物联网技术已经深入千家万户,给予人们更好的生活体验,也在不断的优化甚至是 ...
- 一篇搞懂微信小程序以及和其他对比
一篇搞懂微信小程序以及和其他对比** 前两年的文章了,现在小程序肯定是有变化的,作为自己的随记 一.产品定位及功能分析** 微信小程序是一种全新的连接用户与服务的方式,他可以在微信内被便捷的获取和传播 ...
- 5.DIY可视化-拖拽设计1天搞定主流小程序-公告管理
1.DIY可视化-拖拽设计1天搞定主流小程序-公告管理 公告管理-本教程均在第一节中项目启动下操作 1.DIY可视化-拖拽设计1天搞定主流小程序-公告管理 2.创建数据表 执行: php think ...
- 微信小程序+SpringBoot实现用户登录
微信小程序+SpringBoot实现用户登录 前言 微信小程序越来越吃香了(前话就这么多,嘿嘿) 前端 那就开始吧,登录界面就如此了 wxml内容如下,这是格式化后粘贴过来的,emmm,怪像那回事. ...
最新文章
- mybatis报错There is no getter for property named '***' in 'class ***'
- C#中一些易混淆概念总结--------数据类型存储位置,方法调用,out和ref参数的使用...
- 学习flask的网址
- 用C#开发的双色球走势图(原创)值得园友拥有(二)接上一篇
- R语言扩展包dplyr——数据清洗和整理
- SAP ABAP如何隐藏你写的程序代码
- 白鹭php源码,白鹭/CDNDrive
- javaSE基础——常见的dos命令即其他
- 在ECS系统中使用Job.WithCode
- 留言板小系统程序开发
- 大熊君学习html5系列之------Online Offline(在线状态检测)
- 摄像头视频画面接入,使用iframe标签嵌入到页面中(海康威视、萤石)
- JAVA分页查询实现
- 用python编程分苹果_Python实现分苹果(递归)
- ffmpeg编解码命令(包含YUV编码到常见视频格式文件)
- 鲁棒偏最小二乘法概况
- luci编程 openwrt_Luci流程分析(openwrt下)
- Divisible [数学]同余定理
- cinder云硬盘type创建
- zxing二维码的使用
热门文章
- MySQL数据库(2):进入MySQL与退出MySQL
- python qqbot库_Python QQBot库的QQ聊天机器人
- pycharm、idea Message: 前言中不允许有内容,已解决
- 答题抢红包(答题功能JS部分)
- 面向对象分析与设计示例:骰子游戏
- 中职学校计算机教学中,中职计算机教学中的应用
- html5使用阴影,HTML5 Canvas阴影用法演示
- 苹果亮度突然变暗_苹果最好的旗舰手机,iPhone11Pro Max你用上了吗?
- et框架做游戏服务器性能好吗,et游戏服务器框架
- Netty学习——一个聊天的案例实现(多线程)