利用百度地图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,一经查实,立即删除!

相关文章

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

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

【SoC基础】DMA的工作原理

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

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中的实现)

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

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

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

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

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

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

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

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

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

BGP基本配置实验

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

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

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

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

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

【算法】算法题-20231110

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

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

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

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

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

【Python】AppUI自动化—appium自动化开发环境部署、APP测试案例(17)上

文章目录 一.appium简介1.什么是appium2.appium 的工作原理3.APP类型4.APP页面布局 二,appium开发环境部署(python环境)1.下载安装环境1.1.下载安装所需环境1.2.Appium-desktop( Appium-Server-GUI )配置1.3.Appium-Inspector 配置…

计算机msvcp140.dll重新安装的四个解决方法,专门解决dll文件丢失问题的方法

在我多年的电脑使用经历中,曾经遇到过一个非常棘手的问题,那就是电脑提示找不到msvcp140.dll文件。这个问题让我苦恼了很久,但最终还是找到了解决方法。今天,我就来分享一下我解决这个问题的四种方法,希望对大家有所帮…

python爬虫怎么翻页

爬虫程序的代码实现如下&#xff1a; #include <iostream> #include <string> #include <curl/curl.h>int main() {CURL *curl;CURLcode res;std::string readBuffer;curl_global_init(CURL_GLOBAL_DEFAULT);curl curl_easy_init();if(curl) {curl_easy_se…

AI 绘画 | Stable Diffusion精确控制ControlNet扩展插件

ControlNet ControlNet是一个用于控制AI图像生成的插件&#xff0c;通过使用Conditional Generative Adversarial Networks&#xff08;条件生成对抗网络&#xff09;的技术来生成图像。它允许用户对生成的图像进行更精细的控制&#xff0c;从而在许多应用场景中非常有用&#…

每次重启完IDEA,application.properties文件里的中文变成?

出现这种情况&#xff0c;在IDEA打开Settings-->Editor-->File Encodings 然后&#xff0c;你需要将问号改为你需要的汉字。 重启IDEA&#xff0c;再次查看你的.properties文件就会发现再没有变成问号了

order by的注入与Insert ,update和delete注入

order by的注入 Insert &#xff0c;update和delete注入