利用百度地图api获取经纬度和uniapp定位计算距离

获取百度地图api,成为开发者,去控制台创建应用得到一个ak就可以了

百度地图开放平台网址:百度地图开放平台 | 百度地图API SDK | 地图开发

后端是node

// 根据百度api地址获取经纬度 https://lbsyun.baidu.com/async getLocation(val) {try {let akey = "访问应用(AK)";//https://api.map.baidu.com/geocoding/v3/?address=天津宝坻区钰华街道金玉一园&output=json&ak=${akey}const result = await this.curl(`https://api.map.baidu.com/geocoding/v3/?address=${val}&output=json&ak=${akey}`, {method: 'GET',})if(result.status === 200) {//{"status":0,"result":{"location":{"lng":117.32139072694771,"lat":39.72031795829149},"precise":1,"confidence":70,"comprehension":100,"level":"地产小区"}}const jsonData = JSON.parse(result.data.toString('utf-8'));const location = jsonData.result.location;return {lng: location.lng, // 经度lat: location.lat  // 纬度}}} catch(err) {console.log(err.message)}},

调试正常

后端返回经纬度给前端uniapp定位,计算距离

在manifast.json中,加上以下数据

"mp-weixin" : {/* 小程序特有相关 */"appid" : "",...."permission": {"scope.userLocation": {"desc": "您的位置信息将用于小程序定位服务"}},"requiredPrivateInfos": ["getLocation"]}

然后在index.html, 我把经纬度保存到vuex中

//获取定位getLocation() {uni.getLocation({//可选值为:wgs84、gcj02、bd09ll,默认值为wgs84。其中,gcj02为国测局坐标系,bd09ll为百度地图坐标系,一般使用gcj02即可。type: 'wgs84',success: (res) => {//console.log(res)this.setLocalInfo({longitude: res.longitude, //经度,浮点数latitude: res.latitude //纬度,浮点数})},fail: (err) => {console.log(err)}})}

新建一个location.js文件, 用来计算距离

/*** 通过经纬度 计算 用户当前位置的 的距离xx公里*/
export default {calculateDistance(lat1, lon1, lat2, lon2) {const R = 6371; // 地球半径,单位千米const dLat = (lat2 - lat1) * (Math.PI / 180);const dLon = (lon2 - lon1) * (Math.PI / 180);const a =Math.sin(dLat / 2) * Math.sin(dLat / 2) +Math.cos(lat1 * (Math.PI / 180)) * Math.cos(lat2 * (Math.PI / 180)) *Math.sin(dLon / 2) * Math.sin(dLon / 2);const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));const distance = R * c; // 距离,单位千米return distance;}}
/**
* latitude 是uniapp返回的纬度
* longitude 是uniapp返回的经度
* parseFloat(v.latitude) 后端返回的纬度
* parseFloat(v.longitude) 后端返回的经度
*/calculateDistance(latitude, longitude, parseFloat(v.latitude), parseFloat(v.longitude))

效果如下

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/139550.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

高二英语上

unit 1 1.yarn三种意思 1.码; 2.庭院,天井; 3.花园;down**down 在这里是介词,也可以作副词,与 down 相对的是 up。请比较下列两句: 1.Look! Hes driving down the street . 2.Look! Hes driving up the street .这两例…

Splunk Connect for Kafka – Connecting Apache Kafka with Splunk

1: 背景: 1: splunk 有时要去拉取kafka 上的数据: 下面要用的有用的插件:Splunk Connect for Kafka 先说一下这个Splunk connect for kafka 是什么: What is Splunk Connect for Kafka? Spunk Connect for Kafka is a “sink connector” built on the Kafka Connect…

【修车案例】一波形一案例(9)

故障车型:捷豹X-Type 故障现象:发动机故障指示灯点亮,加速时动力不足,扫描工具显示EGR阀和涡轮增压器增压控制位置传感器电路故障 示波器诊断:检测增压控制位置传感器电路的完整性 A通道 - 增压控制执行电机电源电压B通…

【微信小程序】自定义组件(三)

自定义组件 插槽1、什么是插槽2、单个插槽3、定义多个插槽 父子组件之间的通信1、父子组件之间的通信的3种方式2、事件绑定3、behaviors 插槽 1、什么是插槽 在自定义组件的wxml结构中&#xff0c;可以提供一个<solot> 节点&#xff08;插槽&#xff09;&#xff0c;用…

【SoC基础】DMA的工作原理

&#x1f4e2;&#xff1a;如果你也对机器人、人工智能感兴趣&#xff0c;看来我们志同道合✨ &#x1f4e2;&#xff1a;不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 &#x1f4e2;&#xff1a;文章若有幸对你有帮助&#xff0c;可点赞 &#x1f44d;…

Technology Strategy Patterns 学习笔记8- Communicating the Strategy-Decks(ppt模板)

1 Ghost Deck/Blank Deck 1.1 It’s a special way of making an initial deck that has a certain purpose 1.2 you’re making sure you have figured out what all the important shots are before incurring the major expense of shooting them 1.3 需要从技术、战略、产…

详解数据仓库之拉链表(原理、设计以及在Hive中的实现)

最近发现一本好书&#xff0c;读完感觉讲的非常好&#xff0c;首先安利给大家&#xff0c;国内第一本系统讲解数据血缘的书&#xff01;点赞&#xff01;近几天也会安排朋友圈点赞赠书活动(ง•̀_•́)ง 0x00 前言 本文将会谈一谈在数据仓库中拉链表相关的内容&#xff0c;包…

PanNet: A deep network architecture for pan-sharpening(ICCV 2017)

文章目录 AbstractIntroduction过去方法存在的问题我们提出新的解决方法Related work PanNet: A deep network for pan-sharpening&#xff08;PanNet:用于泛锐化的深度网络&#xff09;Background and motivationPanNet architectureSpectral preservationStructural preserva…

在任何机器人上实施 ROS 导航堆栈的指南

文章目录 路径规划参考 路径规划 路径规划是导航的最终目标。这允许用户向机器人给出目标姿势&#xff0c;并让它在给定的环境中自主地从当前位置导航到目标位置。这是我们迄今为止所做的一切&#xff08;地图绘制和本地化&#xff09;的汇集点。ROS 导航堆栈已经为我们完成了…

MySQL和Postgresql数据库备份和恢复

MySQL和Postgresql数据库备份和恢复 一、MySQL数据库备份 备份单个数据库 $ mysqldump -uroot -p bdname > dbname.sql备份多个数据库 $ mysqldump -uroot -p --databases dbname1 dbname2 ... > dbname.sql # 备份所有数据库 $ mysqldump -uroot -p --all-databases…

【Delphi】 各个平台使用 ntfy 效果说明

目录 一、Delphi 中使用 ntfy 库下载地址 二、各个平台使用效果说明 1. android 平台 2. ios 平台 3. windows 平台 三、总结 一、Delphi 中使用 ntfy 库下载地址 官方的文档地址&#xff1a;ntfyDelphi 接口库地址&#xff1a;GitHub - hazzelnuts/ntfy-for-delphi at …

大数据-之LibrA数据库系统告警处理(ALM-12039 GaussDB主备数据不同步)

告警解释 GaussDB主备数据不同步&#xff0c;系统每10秒检查一次主备数据同步状态&#xff0c;如果连续6次查不到同步状态&#xff0c;或者同步状态异常&#xff0c;产生告警。 当主备数据同步状态正常&#xff0c;告警恢复。 告警属性 告警ID 告警级别 可自动清除 12039…

智能AI系统ChatGPT系统源码+支持GPT4.0+支持ai绘画(Midjourney)/支持OpenAI GPT全模型+国内AI全模型

一、AI创作系统 SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如…

LeetCode110. Balanced Binary Tree

文章目录 一、题目二、题解 一、题目 Given a binary tree, determine if it is height-balanced . Example 1: Input: root [3,9,20,null,null,15,7] Output: true Example 2: Input: root [1,2,2,3,3,null,null,4,4] Output: false Example 3: Input: root [] Output…

BGP基本配置实验

目录 一、实验拓扑 二、实验需求 三、实验步骤 1、IP地址配置 2、内部OSPF互通&#xff0c;配置OSPF协议 3、BGP建立邻居关系 4、R1和R5上把业务网段宣告进BGP 5、消除路由黑洞&#xff0c;在R2、R4上做路由引入 6、业务网段互通 一、实验拓扑 二、实验需求 1、按照图…

JVM源码剖析之软、弱、虚引用的处理细节

目录 写在前面&#xff1a; 源码剖析&#xff1a; Java层面&#xff1a; JVM层面&#xff1a; 使用危险点&#xff1a; 总结&#xff1a; 版本信息&#xff1a; jdk版本&#xff1a;jdk8u40 垃圾回收器&#xff1a;Serial new/old 写在前面&#xff1a; 不同的垃圾回收…

不同性别人群的股骨颈骨密度随年龄的变化趋势

增龄是发生骨质疏松的危险因素。因此&#xff0c;中老年人需要积极防范骨质疏松&#xff0c;以免发生骨折等不良事件。 为了探究不同性别人群的股骨颈骨密度随年龄的变化趋势&#xff0c;首先创建一个df&#xff0c;变量有id&#xff08;编号&#xff09;、age&#xff08;年龄…

【算法】算法题-20231110

一、力口&#xff1a;506. 相对名次 简单 给你一个长度为 n 的整数数组 score &#xff0c;其中 score[i] 是第 i 位运动员在比赛中的得分。所有得分都 互不相同 。 运动员将根据得分 决定名次 &#xff0c;其中名次第 1 的运动员得分最高&#xff0c;名次第 2 的运动员得分第…

Git之分支与版本->课程目标及知识点的应用场景,分支的场景应用,标签的场景应用

1.课程目标及知识点的应用场景 Git分支和标签的命名规范 分支 dev/test/pre/pro(即master) dev:开发环境--windows (自己的电脑) test:测试环境--windows/linux (公司专门的测试电脑 pre:灰度环境(非常大的公司非常重要的项目) pro:正式环境 灰度环境与正式环境的服务器配置…

logback异步日志打印阻塞工作线程

前言 最新做项目&#xff0c;发现一些历史遗留问题&#xff0c;典型的是日志打印的配置问题&#xff0c;其实都是些简单问题&#xff0c;但是往往简单问题引起严重的事故&#xff0c;比如日志打印阻塞工作线程&#xff0c;以logback和log4j2为例。logback实际上是springboot的…