uniapp实现路线规划

UniApp是一个基于Vue.js框架开发的跨平台应用开发框架,可以同时构建iOS、Android、H5等多个平台的应用。它使用了基于前端技术栈的Web开发方式,通过编写一套代码,即可在不同平台上运行和发布应用。

UniApp具有以下特点:

  1. 跨平台开发:UniApp支持将一套代码同时转换为iOS、Android、H5等多个平台的应用,大大节省了开发时间和成本。

  2. 兼容性强:UniApp基于Vue.js框架,结合了各个平台的原生能力,可以调用设备的硬件功能,提供丰富的API接口,满足各种应用的需求。

  3. 开发便捷:UniApp使用Vue.js的开发语法,配合强大的插件系统和组件库,使得开发过程更加高效和简洁。

  4. 性能优化:UniApp针对不同平台做了性能优化,实现了快速启动和流畅的用户体验。

  5. 社区活跃:UniApp拥有庞大的开发者社区,提供了丰富的资源和支持,开发者可以互相交流和分享经验。

总之,UniApp是一款强大的跨平台应用开发框架,可以帮助开发者快速构建高性能、兼容多平台的应用。

作为一个可以一端生成多端的框架今天分享一个路线标注的例子

<view class="mine_map"><map id="map" class="map" :latitude="lat" :longitude="long" :show-location="false":polyline="polyline"></map></view>

我是用的uniapp自带的map标签使用的腾讯地图

首先要manifest.json文件如下配置

然后你需要在腾讯地图下载qqmap-wx-jssdk1.2.zip压缩包;

路径:https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

将下载好的压缩包解压然后将其qqmap-wx-jssdk.js文件放到项目文件中;然后将其引入

在data的return中声明两个数组用于存放起点与终点以及一些其他需要用到的变量

form: { // 初始地latitude: '',longitude: '',},to: { // 目的地坐标latitude: '',longitude: '',},
qqmapsdk: {}, // 腾讯地图小程序的SDKpolyline: [], // 路线map: null, // 创建的map对象index: 0,

然后

onReady() {// 创建map对象this.map = uni.createMapContext('map')},

其次

this.qqmapsdk = new QQMapWX({key: '' // 自己申请的key值});this.routePlanning();

最后就是路线规划的重要代码了

// 路线规划routePlanning() {let that = thisthat.qqmapsdk.direction({mode: 'driving', // 驾车from: { // 起始位置(当前位置)坐标latitude: that.lat,longitude: that.long},to: { // 目的地坐标latitude: that.end_lat,longitude: that.end_long,},// 目的地位置坐标success(res) {// console.log(res)var coors = res.result.routes[0].polylinevar pl = [] // 点串数组// 坐标解压(返回的点串坐标,通过前向差分进行压缩)var kr = 1000000for (var i = 2; i < coors.length; i++) {coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr}// 将解压后的坐标放入点串数组pl中for (var i = 0; i < coors.length; i += 2) {pl.push({latitude: coors[i],longitude: coors[i + 1]})}console.log('点串数组', pl)// 设置polyline属性,将路线显示出来,将解压坐标第一个数据作为起点that.polyline = [{points: pl,color: '#367EEF', // 线的填充色width: 3, // 折现宽度borderWidth: 2, // 边线宽度 borderColor: '#5B98FD', // 边线颜色lineCap: 'square', // 线端头showArrow: true, // 沿线路方向显示箭头}]}})},

注:map标签中:polyline="polyline"为是否显示路线

希望对您有所帮助

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

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

相关文章

成集云 | 钉钉集成用友T费用报销付款接口 |解决方案

源系统成集云目标系统 方案介绍 钉钉是一款免费沟通和协同的多端平台&#xff0c;提供PC版、Web版和手机版&#xff0c;支持手机和电脑间文件互传。钉钉帮助中国企业通过系统化的解决方案&#xff08;微应用&#xff09;&#xff0c;提升中国企业的沟通和协同效率。应用场景包…

动手学深度学习 - 学习环境配置

学习环境配置 1、安装 Miniconda1.1 下载 miniconda31.2 环境变量配置1.3 安装成功测试1.4 配置文件1.5 使用conda创建、使用、删除环境1.6 conda 常用命令 2、使用 miniconda 安装 d2l2.1 下载 d2l 安装包2.2 安装 d2l 1、安装 Miniconda 参考&#xff1a; https://www.jb51.n…

Mac电脑风扇控制推荐 Macs Fan Control Pro 中文 for mac

Macs Fan Control Pro是一款功能全面、易于使用且具有良好兼容性和安全性的风扇控制软件&#xff0c;适用于各种Mac用户。 除了能够调整风扇速度外&#xff0c;Macs Fan Control Pro还支持实时监测硬件传感器的温度&#xff0c;例如CPU、硬盘等&#xff0c;同时显示每个传感器…

Java进阶(List)——面试时List常见问题解读 结合源码分析

前言 List、Set、HashMap作为Java中常用的集合&#xff0c;需要深入认识其原理和特性。 本篇博客介绍常见的关于Java中List集合的面试问题&#xff0c;结合源码分析题目背后的知识点。 关于的Set的博客文章如下&#xff1a; Java进阶&#xff08;Set&#xff09;——面试时…

【flink】Task 故障恢复详解以及各重启策略适用场景说明

文章目录 一. 重启策略种类&#xff08;Restart Strategies&#xff09;1. Fixed Delay Restart Strategy2. Failure Rate Restart Strategy3. Fallback Restart Strategy4. No Restart Strategy 二. 故障恢复策略&#xff08;Failover Strategies&#xff09;1. &#xff08;全…

spring解决后端显示时区的问题

spring解决后端显示时区的问题 出现的问题&#xff1a; 数据库中的数据&#xff1a; 解决方法 spring:jackson:date-format: yyyy-MM-dd HH:mm:sstime-zone: Asia/Shanghai

【JAVA学习笔记】55 - 集合-Map接口、HashMap类、HashTable类、Properties类、TreeMap类(难点)

项目代码 https://github.com/yinhai1114/Java_Learning_Code/tree/main/IDEA_Chapter14/src/com/yinhai/map_ Map接口 一、Map接口的特点&#xff08;难点&#xff09; 难点在于对Node和Entry和EntrySet的关系 注意:这里讲的是JDK8的Map接口特点 Map java 1) Map与Collect…

学习python必会知识点:if条件判断语句的运用

大家早好、午好、晚好吖 ❤ ~欢迎光临本文章 如果有什么疑惑/资料需要的可以点击文章末尾名片领取源码 if的基本格式 if语句用来做判断&#xff0c;并选择要执行的语句分支。 基本格式如下&#xff1a; if CONDITION1:code_block(1) elif CONDITION2:code_block(2) elif CO…

删除文件要谨慎!如何在Linux中删除目录或文件

删除目录和文件是任何操作系统中最基本但最重要的功能之一。在Linux中,如果运行的是窗口环境,则可以使用文件管理器应用程序查找和删除文件。也许你是通过SSH远程登录的,或者你的Linux计算机没有安装GUI,或者你想对你要删除的内容有更多的控制权。与Linux中的任何东西一样,…

生产环境使用boost::fiber

简介 boost::fiber是一类用户级线程&#xff0c;也就是纤程。其提供的例子与实际生产环境相距较远&#xff0c;本文将对其进行一定的改造&#xff0c;将其能够投入到生产环境。 同时由于纤程是具有传染性的&#xff0c;使用纤程的代码里也全部要用纤程封装&#xff0c;本文将对…

appium如何连接多台设备

我们在做app自动化的时候&#xff0c;若要考虑兼容性问题&#xff0c;需要跑几台设备&#xff0c;要是一台一台的跑比较耗时&#xff0c;因此需要考虑使用多线程来同时操作多台设备。 1.我们拿两台设备来模拟操作下&#xff0c;使用&#xff1a;adb devices查看连接状况&#…

sass制作一个简单的星空背景

最近遇到一个有意思的东西&#xff0c;需要制作一个如下图的背景&#xff1a; 如果使用js或者canvas应该是比较简单的&#xff0c;正好最近在使用sass&#xff0c;那么纯sass能否实现这种效果呢&#xff1f;来试一下 首先来生成这些点&#xff1a; <div class"conten…

“恒山光量子”首秀!玻色量子联合移动云发表物理1区Top期刊SCPMA论文

2023年5月&#xff0c;北京玻色量子科技有限公司&#xff08;以下简称“玻色量子”&#xff09;联合移动云在我国知名科技期刊平台《中国科学&#xff1a;物理学 力学 天文学》英文版上发表了以“Optical experimental solution for the multiway number partitioning problem …

K8s集群

统一时间&#xff1a;ntpdate(都做) ntpdate -b ntp1.aliyun.com */1 * * * * /usr/sbin/ntpdate -b ntp1.aliyun.com systemctl status docker vi /etc/docker/daemon.json systemctl restart docker m: vim kubernetes.sh cat >> /etc/yum.repos.d/kubernetes.repo…

中国电子学会主办 第四届ATEC科技精英赛报名启动

11月1日由中国电子学会主办的第四届ATEC科技精英赛&#xff08;ATEC2023&#xff09;正式启动报名。 ATEC科技精英赛是主要面向中国籍计算机等专业在校学生、人工智能及网络安全行业研究者和从业者的一场高水平的智能科技挑战赛&#xff0c;意在贯彻落实党中央、国务院关于推动…

【OpenCV实现图像梯度,Canny边缘检测】

文章目录 概要图像梯度Canny边缘检测小结 概要 OpenCV中&#xff0c;可以使用各种函数实现图像梯度和Canny边缘检测&#xff0c;这些操作对于图像处理和分析非常重要。 图像梯度通常用于寻找图像中的边缘和轮廓。在OpenCV中&#xff0c;可以使用cv2.Sobel()函数计算图像的梯度…

期 货 跟 单/资 管 分 仓/镜像跟单/外 盘 分 仓的全面介绍!

期货跟单是经过科学的筛选找出合格的目标样本数据然后利用样本交易数据转化成未来实际账面利润的综合性过程。 期货跟单分为正向跟单和反向跟单&#xff0c;简单地说就是找出期高手正向跟随高手赚取收益或找出期货低手反向跟随赚取收益。 期货跟单软件是实现跟单过程自动化的工…

设计思想培养:装饰者模式下的RecyclerView添加头、尾

用一个设计模式培养高复用、低耦合思想 前言Android中的装饰者代码实现第一步&#xff1a;创建装饰器DecorateAdapter第二步&#xff1a;处理头部、中间内容、尾部的绑定关系第三步&#xff1a;装饰器的使用第四步&#xff1a;改进、直接封装一个View出来 总结 前言 一个高复用…

SpringCloud Gateway实现请求解密和响应加密

文章目录 前言正文一、项目简介二、核心代码2.1 自定义过滤器2.2 网关配置2.3 自定义配置类2.4 加密组件接口2.5 加密组件实现&#xff0c;AES算法2.6 启动类&#xff0c;校验支持的算法配置 三、请求报文示例四、测试结果4.1 网关项目启动时4.2 发生请求时 前言 本文环境使用比…