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.rhkb.cn/news/178694.html

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

相关文章

【设计模式】第8节:结构型模式之“适配器模式”

一、简介 适配器模式是用来做适配的&#xff0c;它将不兼容的接口转换为可兼容的接口&#xff0c;让原本由于接口不兼容而不能一起工作的类可以一起工作。 适配器模式角色&#xff1a; 请求者client&#xff1a;调用服务的角色目标Target&#xff1a;定义了Client要使用的功…

Window下coturn服务器的搭建

Window下搭建coturn服务器&#xff1a; 准备材料&#xff1a; 1、安装Cygwin&#xff0c;地址&#xff1a;https://cygwin.com/install.html 由于Window无法直接部署coturn&#xff0c;因此需要下载安装Cygwin在Window上部署Linux虚拟环境。 在安装的时候需要安装几下packe…

Azure机器学习 - 使用与Azure集成的Visual Studio Code实战教程

本文介绍如何启动远程连接到 Azure 机器学习计算实例的 Visual Studio Code。 借助 Azure 机器学习资源的强大功能&#xff0c;使用 VS Code 作为集成开发环境 (IDE)。 在VS Code中将计算实例设置为远程 Jupyter Notebook 服务器。 关注TechLead&#xff0c;分享AI全维度知识。…

目标检测 图像处理 计算机视觉 工业视觉

目标检测 图像处理 计算机视觉 工业视觉 工业表盘自动识别&#xff08;指针型和数值型&#xff09;智能水尺识别电梯中电动车识别&#xff0c;人数统计缺陷检测&#xff08;半导体&#xff0c;电子元器件等&#xff09;没带头盔检测基于dlib的人脸识别抽烟检测和睡岗检测/驾驶疲…

Java选择与循环

1.选择 前言&#xff1a;什么是选择呢&#xff1f;在我们的人生中处处面临着选择&#xff0c;比如说在学校你可以选择玩&#xff0c;摆烂&#xff0c;当然也可以选择努力写代码&#xff0c;刷题。什么样的选择就会面临什么样的结果。 其实程序和人生一样&#xff1a;顺序中夹杂…

大数据技术之集群数据迁移

文章目录 数据治理之集群迁移数据 数据治理之集群迁移数据 准备两套集群&#xff0c;我这使用apache集群和CDH集群。 启动集群 启动完毕后&#xff0c;将apache集群中&#xff0c;hive库里dwd,dws,ads三个库的数据迁移到CDH集群 在apache集群里hosts加上CDH Namenode对应域名并…

IPv4首部格式

IPv4首部格式 IPv4数据报的首部格式及其内容是实现IPv4协议各种功能的基础。 在TCPIP标准中&#xff0c;各种数据格式常常以32比特(即4字节)为单位来描述。 IPv4首部格式图 ## IPv4数据报的组成 主要由固定部分(20字节)可变部分(最大40字节) - 固定部分是指每个IPv4数据报都必…

Java使用pdfbox进行pdf和图片之间的转换

简介 pdfbox是Apache开源的一个项目,支持pdf文档操作功能。 官网地址: Apache PDFBox | A Java PDF Library 支持的功能如下图.引入依赖 <dependency><groupId>org.apache.pdfbox</groupId><artifactId>pdfbox-app</artifactId><version>…

去除短视频平台水印 | 一键下载神器

当咱们这些视频创作者在短视频平台找素材的时候&#xff0c;经常会碰到下载下来居然带着平台水印的烦恼&#xff0c;这可让咱们的创作受到了限制和困扰不过别着急&#xff01;咱这就推荐几款超方便的短视频一键去水印下载工具&#xff0c;帮你快速去掉水印&#xff0c;轻松搞定…

你没有见过的 git log 风格

背景 git大家都不陌生&#xff0c;git log 也是大家经常用的指令&#xff0c;今天分享三种 git log的美化格式&#xff0c;大家看看哪种更易读。 git log -15 --graph --decorate --oneline 带有 pretty 格式的git log 风格 log --color --graph --prettyformat:‘%Cred%h%C…

生态扩展:Flink Doris Connector

生态扩展&#xff1a;Flink Doris Connector 官网地址&#xff1a; https://doris.apache.org/zh-CN/docs/dev/ecosystem/flink-doris-connector flink的安装&#xff1a; tar -zxvf flink-1.16.0-bin-scala_2.12.tgz mv flink-1.16.0-bin-scala_2.12.tgz /opt/flinkflink环境…

华为防火墙 配置 SSLVPN

需求&#xff1a; 公司域环境&#xff0c;大陆客户端居家办公室需要连到公司域&#xff0c;这里可以在上海防火墙上面开通SSLVPN&#xff0c;员工就可以透过SSLVPN连通上海公司的内网&#xff0c;但是由于公司域控有2个站点&#xff0c;一个在上海&#xff0c;一个在台北&…

【2023年MathorCup高校数学建模挑战赛-大数据竞赛】赛道A:基于计算机视觉的坑洼道路检测和识别 python 代码解析

【2023年MathorCup高校数学建模挑战赛-大数据竞赛】赛道A&#xff1a;基于计算机视觉的坑洼道路检测和识别 python 代码解析 1 题目 坑洼道路检测和识别是一种计算机视觉任务&#xff0c;旨在通过数字图像&#xff08;通常是地表坑洼图像&#xff09;识别出存在坑洼的道路。这…

框架安全-CVE 复现Apache ShiroApache Solr漏洞复现

文章目录 服务攻防-框架安全&CVE 复现&Apache Shiro&Apache Solr漏洞复现中间件列表常见开发框架Apache Shiro-组件框架安全暴露的安全问题漏洞复现Apache Shiro认证绕过漏洞&#xff08;CVE-2020-1957&#xff09;CVE-2020-11989验证绕过漏洞CVE_2016_4437 Shiro-…

分享者 - 携程旅游创作者搬砖项目图文教程

大家好&#xff01;携程这个出行旅游平台相信大家都不陌生吧。 每天都有大量的旅客在里面浏览攻略&#xff0c;寻找灵感和旅游建议。 那么&#xff0c;我们的项目就是把一些优质的小红书平台上的旅游攻略或作品&#xff0c;经过处理后搬运到携程平台上发布。 这个项目如何操作呢…

06_es分布式搜索引擎2

一、DSL查询文档 1.DSL查询分类 ①查询所有&#xff1a;match_all ②全文检索&#xff1a;利用分词器对用户输入的内容分词&#xff0c;倒排索引去匹配 match_query multi_match_query ③精确查询&#xff1a;根据精确词条查找数据&#xff0c;查找的是keyword,数值,日期,b…

掌握口才与演讲技巧,让你职场中脱颖而出

在职场竞争日趋激烈的今天&#xff0c;口才和演讲能力已经成为一个人成功的重要标志之一。掌握了优秀的口才与演讲技巧&#xff0c;不仅可以帮助你在工作中更好地表达自己和传达信息&#xff0c;同时也可以让你在同事和上级心中留下深刻印象&#xff0c;从而在职场中脱颖而出&a…

JVM修炼印记之初识

文章目录 JVM认识JVM的功能常见JVMHotSpot的发展历程 JVM认识 Java虚拟机&#xff08;Java Virtual Machine&#xff0c;JVM&#xff09;是一个用于执行Java字节码的虚拟计算机。它是Java语言的核心&#xff0c;可以在不同的操作系统和硬件平台上运行Java程序。 JVM负责将Java…

C++——类和对象(中)完结

赋值运算符重载 运算符重载 C 为了增强代码的可读性引入了运算符重载 &#xff0c; 运算符重载是具有特殊函数名的函数 &#xff0c;也具有其 返回值类型&#xff0c;函数名字以及参数列表&#xff0c;其返回值类型与参数列表与普通的函数类似。 函数名字为&#xff1a;关键…

[GDOUCTF 2023]<ez_ze> SSTI 过滤数字 大括号{等

SSTI模板注入-中括号、args、下划线、单双引号、os、request、花括号、数字被过滤绕过&#xff08;ctfshow web入门370&#xff09;-CSDN博客 ssti板块注入 正好不会 {%%}的内容 学习一下 经过测试 发现过滤了 {{}} 那么我们就开始吧 我们可以通过这个语句来查询是否存在ss…