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;——面试时…

创建CI/CD流水线中的IaC前,需要考虑哪些事项?

许多软件工程团队通常会遵循相似的方法来交付基础设施以支持软件开发生命周期。为了缩小基础设施配置方式与应用程序环境部署方式之间的差距&#xff0c;许多 DevOps 团队将其基础设施即代码&#xff08;IaC&#xff09;模块直接连接到其 CI/CD 平台。其目的是创建一个直接融入…

【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

ZCU111 BIST

内建自检&#xff08;Built In Self Test&#xff09; ZCU111开发板在出厂时在Flash里已经预烧录了自检程序&#xff0c;所以直接参考XTP490-zcu111-quickstart.pdf&#xff08;同产品附带纸质文档&#xff09;进行自检即可。 自检失败 自检失败一般是因为Flash自检程序被覆…

【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中的任何东西一样,…

[Python] 读取一个xlsx文件处理并保存成txt文件或binary

最近拿到一个上游的xlsx, 需要自己加工处理取到自己想要的值,需要注意的知识点做个记录: 以下内容基于以下假设: 1, 文件名字为Data_A.xlsx和Data_B.xlsx, 其内容格式为: ABCD EF0x10110110240x2011111170x301123310x401132410x5011411260x601154130 主要程序框架 def cl…

生产环境使用boost::fiber

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

appium如何连接多台设备

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

Unity AudioClip和PCM音频数据的转化

1 PCM音频数据转化AudioClip 假设PCM音频当前是16Khz采样率&#xff0c;16bit数据 byte[] pcmBytesnew byte[10240];float[] floatClipData new float[audioBytes.Length/2];for (int i 0; i < audioBytes.Length; i2){ floatData[i / 2] (short)((audioBytes[i 1] <…

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

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

QString字符串内部嵌套双引号

常见字符串形式 QString string "cube is trangle";此时在字符串string 输出时&#xff0c;将cube输出为“cube" 需要使用转折符打破双引号&#xff08;“”&#xff09;的原有识别属性 QString string " \" cube \" is trangle";

“恒山光量子”首秀!玻色量子联合移动云发表物理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…