uniapp实现路线规划

news2025/2/23 4:03:09

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: {}, // 腾讯地图小程序的SDK
				polyline: [], // 路线
				map: null, // 创建的map对象
				index: 0,

然后

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

其次

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

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

// 路线规划
			routePlanning() {
				let that = this
				that.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].polyline
						var pl = [] // 点串数组
						// 坐标解压(返回的点串坐标,通过前向差分进行压缩)
						var kr = 1000000
						for (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.coloradmin.cn/o/1159672.html

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

相关文章

Python画图之樱花树

Python-turtle画出樱花树&#xff08;有趣小游戏&#xff09; 一、效果图二、Python代码 一、效果图 二、Python代码 #!/usr/bin/env python # codingutf-8 # 画一棵樱花import turtle as T import random from time import sleep# 画樱花的躯干(60,t) def tree(branchLen,t):…

应用性能管理:用户的使用体验应该如何监控?

目录 前言 一、什么是应用用性能管理 二、如何搭建 APM 系统 三、什么是Skywalking 一、Skywalking原理数据库 二、为什么Skywalking侵入性小 三、Skywalking Agent原理 四、Skywalking登录地址 五、Skyworking oap原理 六、Skywalking mysql 七、Skywalking版本选取 …

C语言 每日一题 Day10

1.使用函数判断完全平方数 本题要求实现一个判断整数是否为完全平方数的简单函数。 函数接口定义&#xff1a; int IsSquare(int n); 其中n是用户传入的参数&#xff0c;在长整型范围内。如果n是完全平方数&#xff0c;则函数IsSquare必须返回1&#xff0c;否则返回0。 代码实…

软考之软件工程基础理论知识

软件工程基础 软件开发方法 结构化方法 将整个系统的开发过程分为若干阶段&#xff0c;然后依次进行&#xff0c;前一阶段是后一阶段的工作依据按顺序完成。应用最广泛。特点是注重开发过程的整体性和全局性。缺点是开发周期长文档设计说明繁琐&#xff0c;工作效率低开发前要…

python脚本监听域名证书过期时间,并将通知消息到钉钉

版本一&#xff1a; 执行脚本带上 --dingtalk-webhook和–domains后指定钉钉token和域名 python3 ssl_spirtime.py --dingtalk-webhook https://oapi.dingtalk.com/robot/send?access_tokenavd345324 --domains www.abc1.com www.abc2.com www.abc3.com脚本如下 #!/usr/bin…

pytorch笔记 GRUCELL

1 介绍 GRU的一个单元 2 基本使用方法 torch.nn.GRUCell(input_size, hidden_size, biasTrue, deviceNone, dtypeNone) 输入&#xff1a;&#xff08;batch&#xff0c;input_size&#xff09; 输出和隐藏层&#xff1a;&#xff08;batch&#xff0c;hidden_size&#xf…

Unity 报警告warning CS0649: Field ‘...‘ is never assigned to,...解决办法

文章目录 1. 现象2. 警告出现原因3. 解决方法 1. 现象 2. 警告出现原因 该警告应仅出现在私有成员变量中。那些不能从外部设置&#xff0c;这就是为什么编译器可以确定这些变量没有在任何地方蛇者其值。在C&#xff03;中&#xff0c;没有访问修饰符的变量&#xff08;private…

React中的状态管理

目录 前言 1. React中的状态管理 1.1 本地状态管理 1.2 全局状态管理 Redux React Context 2. React状态管理的优势 总结 前言 当谈到前端开发中的状态管理时&#xff0c;React是一个备受推崇的选择。React的状态管理机制被广泛应用于构建大型、复杂的应用程序&#xf…

HNU-编译原理-讨论课1

讨论课安排&#xff1a;2次4学时&#xff0c;分别完成四大主题讨论 分组&#xff1a;每个班分为8组&#xff0c;每组4~5人&#xff0c;自选组长1人 要求和说明&#xff1a; 以小组为单位上台报告&#xff1b;每次每组汇报2个小主题&#xff0c;每组按要求在2个小主题中各选1…

GEE——Publisher Data Catalogs发布者数据目录

发布者数据目录 发布者数据目录由数据集发布者策划&#xff0c;供更大范围的 Google 地球引擎社区使用&#xff0c;并作为地球引擎资产集公开共享。这些目录并非由 Google 编制。这里是GEE团队简政放权的一个过程&#xff0c;也就是说这些数据集的后续更新和维护并不由GEE团队负…

在虚拟机centos7中部署docker+jenkins最新稳定版

在虚拟机centos7中部署dockerjenkins最新稳定版 查看端口是否被占用 lsof -i:80 查看运行中容器 docker ps 查看所有容器 docker ps -a 删除容器 docker rm 镜像/容器名称 强制删除 docker rmi -f 镜像名 查看当前目录 pwd 查看当前目录下所有文件名称 ls 赋予权限 chown 777 …

[TryHackMe] [Intro to Offensive Security] 网络安全概论.黑掉你的第一个网站

TASK1:什么是进攻性安全&#xff1f; 简而言之&#xff0c;攻击性安全是闯入计算机系统、利用软件错误并查找应用程序中的漏洞以获得未经授权的访问的过程。 要打败黑客&#xff0c;你需要表现得像个黑客&#xff0c;在网络犯罪分子之前发现漏洞并推荐补丁 另一方面&#xf…

Yolov5-detect.py代码简化(便于移植)

Yolov5-detect.py代码简化&#xff08;便于移植&#xff09; # -*- coding: UTF-8 -*- # Time : 2023/11/1 18:23 # File : detect_iter.py # Software: PyCharm # YOLOv5 &#x1f680; by Ultralytics, GPL-3.0 license import argparse import os import sys import time…

C语言_自定义类型详解

文章目录 前言一.结构体的声明1.1结构体的基础知识1.2结构的声明1.3特殊声明1.4结构体的自引用在结构中包含一个类型为该结构本身的成员是否可以&#xff1f;正确的自引用方式匿名结构体类型和typedef的结合形式 1.5 结构体变量的定义和初始化结构体定义与初始化结构体里嵌套结…

数据结构与算法:稀疏数组Java版

什么是稀疏数组 稀疏数组是一种特殊的数据结构&#xff0c;它仅在数组中保存了有效的数据元素&#xff0c;忽略掉了大部分未被使用或被零值占据的元素&#xff0c;从而节省了内存空间。 在稀疏数组中&#xff0c;只有非零元素会被保存&#xff0c;这些元素在原数组中的位置和…

姿态识别+康复训练矫正+代码+部署(AI 健身教练来分析深蹲等姿态)

姿态识别康复训练矫正&#xff08;AI 健身教练姿态分析&#xff09; 目录 本文旨在构建一个 AI 健身教练&#xff0c;帮助判断姿态标准与否&#xff0c;并且矫正姿态&#xff01;无论您是初学者还是专业人士&#xff0c;它都可以帮助您无缝地进行深蹲。为了完成这项任务&…

基于海洋捕食者算法的无人机航迹规划-附代码

基于海洋捕食者算法的无人机航迹规划 文章目录 基于海洋捕食者算法的无人机航迹规划1.海洋捕食者搜索算法2.无人机飞行环境建模3.无人机航迹规划建模4.实验结果4.1地图创建4.2 航迹规划 5.参考文献6.Matlab代码 摘要&#xff1a;本文主要介绍利用海洋捕食者算法来优化无人机航迹…

SANSAN每周新鲜事|到底哪一款物联网平台适合你?

假如您有对设备进行监控、控制、管理、维护的需求&#xff0c;或者您的业务系统涉及设备管控、设备数据可视化和分析&#xff0c;大概率上&#xff0c;您需要开发一套系统专门去做设备接入和管理&#xff0c;您会面临两种选择&#xff1a; 1、选择一款合适的物联网平台&#x…

“消费增值:绿色商业模式的创新之路“

随着消费者对绿色、环保生活方式的追求不断增加&#xff0c;一种名为消费增值的商业模式正逐渐受到人们的关注。通过鼓励绿色消费行为&#xff0c;消费增值模式引导消费者形成低碳环保的生活方式&#xff0c;并实现积分的增值和社会效益的提升。一种只涨不跌的模式&#xff0c;…