前端开发中地图定位与距离计算的应用实践

前端开发中地图定位与距离计算的应用实践

在前端开发中,地图功能的应用日益广泛,无论是用户位置的定位、目标距离的计算,还是地址的解析与展示,地图都发挥着不可替代的作用。本文将重点介绍前端开发中实现地图定位、距离计算以及地址解析的方法,并以腾讯地图API为例,详细解析其在前端实践中的应用。

一、地图定位功能的实现

前端实现地图定位主要依赖于浏览器的地理位置API以及地图服务提供商的API。在Vue框架中,我们可以使用<map>组件来嵌入地图,并通过设置经纬度来定位地图的中心点。例如,通过:latitude:longitude属性绑定,我们可以将地图中心定位到指定的位置。

同时,为了提升用户体验,我们通常会开启定位功能,让用户能够直接看到自己当前的位置。这可以通过调用浏览器的地理位置API来实现,但需要注意的是,用户需要授予权限才能进行定位。

二、距离计算的实现

在前端开发中,计算当前定位离目标位置的距离是一个常见的需求。这通常涉及到地理坐标的计算,包括经纬度之间的距离计算。我们可以利用Haversine公式或者球面三角法来计算两点之间的距离。

以Haversine公式为例,该公式可以根据地球上两个点的经纬度计算出它们之间的大圆距离。在前端开发中,我们可以封装一个函数来实现这一功能,传入两个点的经纬度坐标,即可得到它们之间的距离。

三、腾讯地图API的应用

腾讯地图API提供了丰富的地图服务,包括地图展示、定位、搜索、路线规划等。在前端开发中,我们可以利用腾讯地图API来实现更加丰富的地图功能。

其中,经纬度反向编码解析地址是腾讯地图API的一个重要功能。通过调用API接口,并传入经纬度坐标,我们可以得到对应的地址信息,包括省、市、区、街道等详细信息。这对于前端开发中的地址展示和位置识别非常有用。

四、实践案例

下面是一个简单的实践案例,展示了如何在Vue项目中使用腾讯地图API实现地图定位、距离计算和地址解析功能。

首先,我们需要在项目中引入腾讯地图API的SDK,并在Vue组件中初始化地图实例。然后,通过调用API接口获取用户的位置信息,并在地图上展示定位点。接着,我们可以利用Haversine公式计算用户位置与目标位置之间的距离,并在界面上展示。最后,通过调用腾讯地图API的经纬度反向编码接口,我们可以解析出目标位置的详细地址信息。

<template>
    <view class="content">
        <scroll-view class="scrollV" scroll-y="true">

            <view class="inputView">
                <text class="leftTitle">活动内容</text>
            </view>
            <view class="inputView">
                {{"去清远古龙峡漂流"}}
            </view>

            <view class="inputView">
                <text class="leftTitle">签到须知</text>
            </view>
            <view class="inputView">
                {{'距离活动地10km内可签到成功'}}
            </view>

            <!-- 
             App端:manifest.json的“App模块配置”中勾选“Maps(地图)”,并根据项目实际情况勾选使用的三方地图SDK:https://uniapp.dcloud.net.cn/tutorial/app-maps.html#
             H5端: 使用地图和定位相关,需要在 manifest.json 内配置腾讯或谷歌等三方地图服务商申请的秘钥(key)。高德地图需要额外配置 securityJsCode 或 serviceHost,

             若是微信小程序只需配置微信小程序权限配置):
                  page.json配置以下

                  // 权限设置
                  "permission": {
                      "scope.userLocation": {
                          "desc": "您的位置信息将用于该活动签到"
                      }
                  }
             -->
            <!-- scale缩放级别,取值范围为3-20 longitude:地图中心精度 latitude:地图中心纬度 markers:覆盖物 show-location:是否显示定位-->
            <map class="mapV" :latitude="infoDict.lat" :longitude="infoDict.lon" scale='6' :markers="covers"
                show-location=false>
            </map>

        </scroll-view>

        <view class="btnview" @tap="goSignIn">{{'签到' + distanceStr}}</view>

    </view>
</template>

<script>
    import Vue from 'vue'

    export default {
        data() {
            return {

                // 覆盖物
                covers: [],

                // 目标经纬度信息
                infoDict: {
                    'lon': '113.17',
                    'lat': '23.8'
                },

                // 我的定位经纬度信息
                myPinInfo: {},

                // 默认距离为负数
                distance: -9999,
                distanceStr: ''
            }
        },

        onShow() {

            // 获取当前位置
            this.getlocation();

        },
        methods: {

            getlocation() {

                let myThis = this;
                console.log('获取位置开始');
                uni.getLocation({
                    type: 'gcj02',
                    success: function(res) {
                        myThis.myPinInfo = res;
                        console.log('当前位置的经度:' + res.longitude);
                        console.log('当前位置的纬度:' + res.latitude);

                        myThis.covers = [{
                                latitude: myThis.infoDict.lat,
                                longitude: myThis.infoDict.lon,
                                width: 30,
                                height: 30,
                                id: 20000,
                                iconPath: '../../static/activity_pin.png'
                            },
                            {
                                latitude: myThis.myPinInfo.latitude,
                                longitude: myThis.myPinInfo.longitude,
                                width: 30,
                                height: 30,
                                id: 20001,
                                iconPath: '../../static/people_pin.png'
                            }
                        ];
                        myThis.distance = myThis.getDistance(myThis.infoDict.lat, myThis.infoDict.lon, myThis
                            .myPinInfo.latitude, myThis.myPinInfo.longitude)
                        myThis.distanceStr = '(当前距离' + myThis.distance + '米)';

                    }
                });
            },
            // 计算两点距离
            getDistance(lat1, lng1, lat2, lng2) {
                let EARTH_RADIUS = 6378.137;
                let radLat1 = this.rad(lat1);
                let radLat2 = this.rad(lat2);
                let a = radLat1 - radLat2;
                let b = this.rad(lng1) - this.rad(lng2);
                let 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 * EARTH_RADIUS;
                //s = Math.round(s * 10000d) / 10000d;
                s = Math.round(s * 10000) / 10000;
                s = s * 1000; //乘以1000是换算成米
                return s;
            },
            // 弧度计算
            rad(d) {
                return d * Math.PI / 180.0;
            },

            // 立即签到
            goSignIn(e) {

                if (this.distance > 10000) {

                    uni.showModal({
                        title: '温馨提示',
                        content: '您的当前位置距离活动目的地太远, 无法签到',
                        showCancel: false
                    })
                    return;
                } else if (this.distance < 0) {

                    uni.showModal({
                        title: '温馨提示',
                        content: '您的定位权限未打开, 请点击小程序右上角···菜单按钮, 然后点击设置,打开定位权限',
                        showCancel: false
                    })

                    return
                }

            },

        }
    }
</script>

五、总结与展望

前端开发中地图功能的应用不仅提升了用户体验,也为开发者提供了更多的可能性。通过合理利用地图服务提供商的API,我们可以实现丰富的地图功能,满足各种业务需求。

未来,随着前端技术的不断发展和地图服务的不断完善,我们相信地图在前端开发中的应用将会更加广泛和深入。同时,我们也期待更多的开发者能够参与到地图开发的行列中来,共同推动前端技术的发展和创新。

小程序体验地址(已上线)

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

windows 系统下全新下载安装 mysql8.0 数据库(详细)

windows 系统下全新下载安装 mysql8.0 数据库&#xff08;详细&#xff09; 段子手168 1、登录官方网站下载&#xff1a; https://dev.mysql.com/downloads/windows/installer/ 2、下载最新版本&#xff0c;一般可能需要注册登录&#xff0c;下载其他历史版本&#xff0c;请…

【LAMMPS学习】八、基础知识(1.3)从一个输入脚本运行多个模拟

8. 基础知识 此部分描述了如何使用 LAMMPS 为用户和开发人员执行各种任务。术语表页面还列出了 MD 术语&#xff0c;以及相应 LAMMPS 手册页的链接。 LAMMPS 源代码分发的 examples 目录中包含的示例输入脚本以及示例脚本页面上突出显示的示例输入脚本还展示了如何设置和运行各…

【智能算法】省时方便,智能算法统计指标——一键运行~

目录 1.常用统计指标2.参数统计检验3.结果展示4.自定义修改测试框架 1.常用统计指标 测试智能算法性能时&#xff0c;常常会用到以下5种常用指标&#xff0c;简单不赘述&#xff1a; 最优值、最差值、均值、中位数、标准差 2.参数统计检验 单纯依靠常用统计指标说服力不足&…

【noVNC】使用noVNC实现浏览器网页访问vnc(基于web的远程桌面)

1.VNC本身提供的http连接方式&#xff0c;可传输文件&#xff0c;画面有卡顿&#xff0c;需要安装jre 2.noVNC访问方式&#xff0c;不可传输文件&#xff0c;画面较为流畅&#xff0c;不用安装插件运行环境 一、noVNC 是什么 Web 端的Vnc软件&#xff0c;通过noVNC&#xff0…

CSS 实现伸缩导航仪表板侧边栏菜单

CSS 实现伸缩导航仪表板侧边栏菜单 效果展示 展开状态 收起状态 CSS 知识点 回顾曲面圆角的实现知识点 字体库准备 菜单的图标使用的是ionicons的图标库&#xff0c;所以需要页面需要引入对应的文件。 <scripttype"module"src"https://unpkg.com/i…

进程间通信 (匿名管道)

一、进程间通信的概念 进程间通信是一个进程把自己的数据交给另一个进程&#xff0c;它可以帮助我们进行数据传输、资源共享、通知事件和进程控制。 进程间通信的本质是让不同的进程看到同一份资源。因此&#xff0c;我们要有&#xff1a; 1、交换数据的空间。2、这个空间不能由…

CNN-Transformer时间序列预测

部分代码&#xff1a; # CNN-Transformer class CNNTransformerEncoder(nn.Module):def __init__(self, input_features, transformer_encoder_heads,embedding_features, cnn_kernel_size, dim_feedforward_enc, n_encoder_layer):super(CNNTransformerEncoder, self).__init…

分析染色体级别的基因组装配揭示了六倍体栽培菊花的起源和进化-文献精读-7

Analyses of a chromosome-scale genome assembly reveal the origin and evolution of cultivated chrysanthemum 分析染色体级别的基因组装配揭示了栽培菊花的起源和进化 六倍体植物基因组的文献&#xff0c;各位同仁还有什么有特色的基因组评论区留言~ 摘要 菊花&#xf…

spring boot —— Spring-Cloud-Zuul(网关服务getway),kafka笔记

一、 引入zuul依赖&#xff1a; org.springframework.cloud spring-cloud-starter-zuul 二、创建应用主类。使用EnableZuulProxy注解开启zuul的API网关服务功能&#xff1a; EnableZuulProxy SpringCloudApplication public class Application { public static void mai…

【漏洞复现】WordPress Welcart 任意文件读取漏洞(CVE-2022-4140)

0x01 产品简介 Welcart 是一款免费的 WordPress 电子商务插件。Welcart 具有许多用于制作在线商店的功能和自定义设置。您可以轻松创建自己的原始在线商店。 0x02 漏洞概述 Welcart存在任意文件读取漏洞&#xff0c;未授权的攻击者可以通过该漏洞读取任意文件&#xff0c;获…

【RAG实践】Rerank,让大模型 RAG 更近一步

RAGRerank原理 上一篇【RAG实践】基于LlamaIndex和Qwen1.5搭建基于本地知识库的问答机器人 我们介绍了什么是RAG&#xff0c;以及如何基于LLaMaIndex和Qwen1.5搭建基于本地知识库的问答机器人&#xff0c;原理图和步骤如下&#xff1a; 这里面主要包括包括三个基本步骤&#…

【无标题】系统思考—心智模式

“直到你使无意识变为有意识&#xff0c;它将指导你的生活并且你会称之为命运。”—卡尔荣格 心智模式深藏于我们内心之中&#xff0c;它潜移默化地影响着我们对世界的理解和判断。往往这些影响是如此隐蔽&#xff0c;以至于我们自己都未必察觉到是什么在驱动我们的选择、决策…

ES7-10:async和await、异步迭代..

1-ES7新特性 indexof如果没有就返回-1&#xff0c;有就返回索引 如果仅仅查找数据是否在数组中,建议使用includes,如果是查找数据的索引位置,建议使用indexOf更好一些 2-ES8-async和await 所有的需要异步处理的Promise对象都写在async中await等待结果 async、await 使异步操…

【MATLAB源码-第184期】基于matlab的FNN预测人民币美元汇率 输出预测图误差图RMSE R2 MAE MBE等指标

操作环境&#xff1a; MATLAB 2022a 1、算法描述 前馈神经网络&#xff08;Feedforward Neural Network, FNN&#xff09;是最简单也是应用最广泛的人工神经网络之一。在许多领域&#xff0c;尤其是数据预测方面&#xff0c;FNN已经展现出了卓越的性能和强大的适应性。 一、…

贪心算法|406.根据身高重建队列

力扣题目链接 class Solution { public:static bool cmp(const vector<int>& a, const vector<int>& b) {if (a[0] b[0]) return a[1] < b[1];return a[0] > b[0];}vector<vector<int>> reconstructQueue(vector<vector<int>…

鸿蒙应用开发之图案密码锁组件

前面学习了导航组件,现在来学习另一个密码设置和验证组件,这种组件比较常用。因为当用触屏手机之后,屏幕上就可以滑动操作,比普通PC电脑要多一些功能了。早前的密码都是输入数字,没有滑动输入九宫格的密码。 大体如下面的界面: 采用这种密码,一般情况下是不用记住数字,…

Vue - 你知道Vue中key的工作原理吗

难度级别:中级及以上 提问概率:80% 在Vue项目开发中,并不推荐使用索引做为key,以为key必须是唯一的,可以使用服务端下发的唯一ID值,也不推荐使用随机值做为key,因为如果每次渲染都监听到不一样的key,那么节点将无法复用,这与Vue节省…

Kotlin:常用标准库函数(let、run、with、apply、also)

一、let 扩展函数 Kotlin标准库函数let可用于范围确定和空检查。当调用对象时&#xff0c;let执行给定的代码块并返回其最后一个表达式的结果。对象可以通过引用(默认情况下)或自定义名称在块中访问。 let扩展函数源码 let.kt文件代码 fun main() {println("isEmpty $is…

企业如何防止内部人员泄密(实用方法分享)

“老干妈配方遭泄露”事件你们一定有所耳闻吧&#xff01; 2016年5月&#xff0c;“老干妈”工作人员发现&#xff0c;本地另一家食品加工企业生产的一款产品与老干妈品牌同款产品相似度极高。 经查&#xff0c;涉嫌窃取此类技术的企业从未涉足该领域&#xff0c;绝无此研发能…

C/S医学检验LIS实验室信息管理系统源码 医院LIS源码

LIS系统即实验室信息管理系统。LIS系统能实现临床检验信息化&#xff0c;检验科信息管理自动化。其主要功能是将检验科的实验仪器传出的检验数据经数据分析后&#xff0c;自动生成打印报告&#xff0c;通过网络存储在数据库中&#xff0c;使医生能够通过医生工作站方便、及时地…