uniapp 实现地图距离计算

这篇具有很好参考价值的文章主要介绍了uniapp 实现地图距离计算。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在uniapp中实现地图距离计算可以借助第三方地图服务API来实现。以下是一种基本的实现方式:

  1. 注册地图服务API账号:你可以选择使用高德地图、百度地图等提供地图服务的厂商,注册一个开发者账号并获取API密钥。

  2. 安装相关插件或SDK:根据你选择的地图服务提供商,下载并安装相应的uniapp插件或SDK。例如,如果选择使用高德地图,可以安装uni-amap-map插件。

  3. 配置API密钥:在uniapp项目的配置文件(manifest.jsonvue.config.js)中,将你获取的API密钥配置进去,以便你的应用程序能够访问地图服务API。

  4. 创建地图组件:在uniapp的页面中创建一个地图组件,可以使用插件或SDK提供的相关组件进行创建。例如,在使用高德地图的情况下,可以使用<amap-map>标签创建地图组件。

  5. 获取坐标信息:在你的应用中,需要获取用户输入的起始位置和目标位置的经纬度坐标信息,可以通过表单、定位功能或手动输入等方式获取。

  6. 调用API计算距离:使用地图服务API提供的距离计算接口,传入起始位置和目标位置的经纬度坐标,调用API进行距离计算。例如,在使用高德地图的情况下,可以使用AMap.Distance类的getDistance()方法来计算距离。

  7. 显示结果:将距离计算结果显示在你的应用程序中,可以通过文本、弹窗等方式展示给用户。

这里我使用的是腾讯地图;腾讯地图实现上述功能在配置上的话会稍微复杂一点点;

首先需要配置下述代码

"permission": {
		"scope.userLocation": {
			"desc": "你的位置信息将用于小程序位置接口的效果展示"
		}
	}

首先需要再pages.json上配置;

uniapp 实现地图距离计算,uni-app

 然后在manifest.json中的源码视图中配置

uniapp 实现地图距离计算,uni-app

然后需要将你申请的key放入

uniapp 实现地图距离计算,uni-app

 之后就可以在页面使用了;可以使用uniapp提供的api来进行自身位置的获取,首先使用getSetting来获取是否开启 定位权限;如果获取定位权限再根据getLocation获取自身位置的经纬度;然后根据自身定位与目标定位计算出距离

下面是计算代码

// 计算距离
							function getDistance(lat1, lon1, lat2, lon2) {
								const earthRadius = 6371; // 地球半径,单位为千米
								console.log(lat1, lon1, lat2, lon2);
								// 将经纬度转换为弧度
								const radLat1 = (Math.PI / 180) * lat1;
								const radLon1 = (Math.PI / 180) * lon1;
								const radLat2 = (Math.PI / 180) * lat2;
								const radLon2 = (Math.PI / 180) * lon2;
								
								console.log(radLat1,radLat2,radLon1,radLon2);

								// 计算经纬度的差值
								const deltaLat = radLat2 - radLat1;
								const deltaLon = radLon2 - radLon1;
								console.log(deltaLat,deltaLon);

								// 使用Haversine公式计算距离
								const a =
									Math.sin(deltaLat / 2) * Math.sin(deltaLat / 2) +
									Math.cos(radLat1) *
									Math.cos(radLat2) *
									Math.sin(deltaLon / 2) *
									Math.sin(deltaLon / 2);
								const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
								const distance = earthRadius * c;

								return distance.toFixed(2); // 返回保留两位小数的距离值
							};

注意:距离为km;调用方法为getDistance(经度1,纬度1,经度2,纬度2),希望对您有所帮助

 文章来源地址https://www.toymoban.com/news/detail-693134.html

 

到了这里,关于uniapp 实现地图距离计算的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Uni-App】uniapp使用uview实现弹出键盘输入密码/验证码功能

    组件使用的是uview组件,Keyboard 键盘和MessageInput 验证码输入两个组件配合使用。 通过mode参数定义键盘的类型,v-model绑定一个值为布尔值的变量,我绑定的是showKeyboard变量,控制键盘的弹出与收起; mode = number (默认值)为数字键盘,此时顶部工具条中间的提示文字为\\\"数字键盘

    2023年04月16日
    浏览(73)
  • 【App端】uni-app使用百度地图api和echarts省市地图下钻

    近期的app项目中想加一个功能,展示全国各地的某一数据统计情况,想来想去,用echarts做地图数据可视化直观且美观。于是就去研究了如何使用,其实在移动端使用echarts地图踩的bug挺多的,总结如下。 JavaScript API GL账号和获取密钥 1、获取SHA1:Android平台云端打包 - 公共测试

    2024年02月11日
    浏览(51)
  • uni-app根据腾讯地图接口三级联动组件

    有时候很懵逼,因为需要用到腾讯地图接口的三级联动,习惯问问度娘,结果出来了我几年前用JQ写的,好吧,还是自己撸一个现在用的吧 组件使用得是uni-popup弹窗,picker-view 滑动选择地址 访问腾讯地图接口使用的是 vue-jsonp  在main.js引入 组件address.vue 组件只需要填写你自

    2024年01月20日
    浏览(59)
  • 【App端】uni-app使用echarts和百度地图api

    近期的app项目中想加一个功能,展示全国各地的某一数据统计情况,想来想去,用echarts做地图数据可视化直观且美观。于是就去研究了如何使用,其实在移动端使用echarts地图踩的bug挺多的,总结如下。 JavaScript API GL账号和获取密钥 1、获取SHA1:Android平台云端打包 - 公共测试

    2024年02月11日
    浏览(55)
  • uni-app 小程序使用腾讯地图完成搜索功能

    前言 使用uni-app开发小程序时候使用腾讯地图原生SDK是,要把原生写法转成vue写法在这记录一下。 我们需要注意的是使用高德地图时我们不仅要引入SDK,还要再uni-app中配置允许使用。 由于uni-app内置地图就是腾讯,所以获取位置的api,uni.getLocation坐标不用转换,直接使用。

    2024年02月08日
    浏览(64)
  • uni-app 小程序使用什么地图好(百度,高德,腾讯)

    前言 在开发小程序的时候我们会发现经常需要地图的使用,但是市面上主流的地图有腾讯,高德,百度。哪个好了 其实在我看来这个3地图没有好坏之分,各有所长。只是说哪个地图写小程序更加轻便,更加低耦合。 后面我把他们都试了一下发现,他们的使用方式都差不多,

    2024年02月09日
    浏览(90)
  • uni-app微信小程序打开第三方地图

    小程序中有个按钮点击以后会调用手机中第三方地图进行导航。 参数 位置信息 经度 与纬度。 原本以为一切顺利,结果在微信开发者工具中显示如下: location参数格式错误,请正确填写 经过测试发现,因为我在微信小程序中使用,所以默认会使用腾讯地图来显示。 而我的经

    2024年02月06日
    浏览(83)
  • uni-app打包后安卓不显示地图及相关操作详解

    新公司最近用uni-app写app,之前的代码有很多问题,正好趁着改bug的时间学习下uni-app。 使用uni-app在浏览器调试的时候,地图是展示的,但是打包完成后,在app端是空白的。咱第一次写app,啥也不懂啊不是。 附上一张浏览器调试的截图: 安卓app上是空白页,就不附图了。 因为

    2024年02月11日
    浏览(71)
  • 前端vue uni-app百度地图定位组件,显示地图定位,标记点,并显示详细地址

    快速实现前端百度地图定位组件,显示地图定位,标记点,并显示详细地址; 阅读全文下载完整代码请关注微信公众号: 前端组件开发 效果图如下:     代码如下: # 百度地图定位组件,显示地图定位,标记点,并显示详细地址 #### 使用方法 ```使用方法 #安装vue-baidu-map插件

    2024年02月08日
    浏览(65)
  • 『UniApp』uni-app-打包成App

    大家好,我是 BNTang, 在上一节文章中,我给大家详细的介绍了如何将我开发好的项目打包为微信小程序并且发布到微信小程序商店 趁热打铁,在来一篇文章,给大家详细的介绍如何将项目打包成APP。 打包 App 也是一样的,首先需要配置关于 App 应用的基础信息,打开 manifest

    2024年02月04日
    浏览(108)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包