微信小程序绘制轨迹

news2024/10/19 9:27:34

1、map | uni-app官网

根据官网描述:通过从数据库获取POI数据,并通过 uni-id-common 内的路线规划API,计算路线、距离、时间。

2、

<map style="width:100%;height:96%;" id="myMap" :scale="scale" :longitude="longitude" :latitude="latitude"
					:markers="markers" :polyline="polyline"></map>

先绘制地图。

3、注意先添加腾讯地图的JS文件

import QQMapWX from '@/util/qqmap-wx-jssdk1.2/qqmap-wx-jssdk';

 4、轨迹和图标渲染

seelat(boxNo, orderContainerId) {
				const vm = this
				vm.$service.thirdTrackInfo({
					boxNo: boxNo,
					orderContainerId: orderContainerId,
					orderId: vm.transportOrderId
				}).then(res => {
					if (res.code == 200) {
						vm.latList = res.data ? res.data : []
						vm.polyline = []
						vm.markers = []
						if (vm.latList.length > 0) {
							let arrPosi = []
							let arrPloy = []
							this.longitude = vm.latList[0].lng
							this.latitude = vm.latList[0].lat
							vm.latList.forEach(item => {
								let obj = {
									latitude: item.lat,
									longitude: item.lng
								}
								arrPloy.push(obj)
							})
							this.polyline = [{
								points: arrPloy,
								color: '#FF0000DD',
								width: 4,
								dottedLine: false
							}];
							this.markers = [{
									iconPath: 'https:/front/end.png',
									id: 0,
									latitude: vm.latList[0].lat,
									longitude: vm.latList[0].lng,
									width: 50,
									height: 50
								},
								{
									iconPath: 'https:/back/start.png',
									id: 1,
									latitude:vm.latList.length > 0 ? vm.latList[vm.latList.length - 1].lat : '',
									longitude:vm.latList.length > 0 ? vm.latList[vm.latList.length - 1].lng: '',
									width: 50,
									height: 50
								}
							]
						}
					}
				})
			},

5、调用方法后地图轨迹就渲染出来啦

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

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

相关文章

打包使用pythn编写的maya插件,使用pyeal打包

1.安装python,注意版本一定要和maya上面的python解释器版本一致 2.安装pyeal使用pycharm或者maya自带的python解释器mayapy.exe 3.如果有别的库&#xff0c;下载安装到你需要的文件夹中&#xff1a; 使用mayapy: "D:\AnZhuangBao\maya2022\2022\maya2022AZ\Maya2022\bin\m…

【华为HCIP实战课程十四】OSPF网络中LSA过滤,网络工程师

一、3类LSA过滤以及汇总 我们查看SW3的路由到达R4的lo0下一跳是R1的接口IP 10.1.15.1 我们在SW3上查看3类汇总LSA: SW3的3类汇总LSA可以看到ABR R1和R5到达R4的lo0的度量值分别为48和96,因此SW3到达R4的lo0的地址为48+1=49 和 96+1=97, 因此会显示49的cost,SW3的下一跳为R1的…

word怎么清除格式,Word一键清除所有格式教程

你是否曾在编辑Word文档时遇到过复制内容时格式混乱的情况?别担心&#xff0c;这只需要清除一下格式就可以了&#xff0c;很多朋友还不知道word怎么清除格式&#xff0c;下面小编就来给大家讲一讲word一键清除所有格式的方法教程&#xff0c;操作非常简单&#xff0c;有需要的…

使用短效IP池的优势是什么?

短效IP池作为代理IP服务中一种独特的资源管理方式&#xff0c;其应用已经在数据采集、市场分析和网络安全等多个领域中展示出强大的功能。尽管“短效”听起来似乎意味着某种限制&#xff0c;然而在某些特定的应用场景下&#xff0c;短效IP池却提供了无可比拟的优势。本文将详细…

流量PID控制(开度前馈量计算+辅助PID)

和流体流速(瞬时流量)相关的计算请参考下面文章链接: 1、PLC通过伯努利方程近似计算水箱流量 PLC通过伯努利方程近似计算水箱流量(FC)-CSDN博客文章浏览阅读1.6k次。本文介绍了如何使用PLC通过伯努利方程近似计算水箱中的液体流量,主要涉及流量计算、模型验证、梯形图编程及…

R语言机器学习算法实战系列(六)K-邻近算法 (K-Nearest Neighbors)

禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍教程下载数据加载R包导入数据数据预处理数据描述数据切割调节参数构建模型预测测试数据评估模型模型准确性混淆矩阵模型评估指标ROC CurvePRC Curve保存模型总结系统信息介绍 K-邻…

AI创新驱动教育:科技革命下的教育转型

日前&#xff0c;2024教育装备创新大会在杭州市余杭区举行&#xff0c;会上集中展示了AI技术如何赋能教学并深入探讨了其影响。AI技术正在以前所未有的力度&#xff0c;引领教育步入智能新时代&#xff0c;成为教育改革创新的催化剂。 在国家政策的积极推动下&#xff0c;AI技…

tomcat catalina log 出现乱码(SpringMvc)

如下图所示&#xff1a; 解决方法&#xff1a; 找到tomcat的conf文件夹&#xff0c;打开logging.properties&#xff0c;把最后一个UTF-8改成GBK就可以啦 改正后&#xff1a;

基于SpringBoot+Vue+uniapp微信小程序的校园反诈骗微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)

项目运行截图 技术框架 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框架的应用程序的开源框架。它采用约定大于配置的理念&#xff0c;提供了一套默认的配置&#xff0c;让开发者可以更专注于业务逻辑而不是配置文件。Spring Boot 通过自动化配置和约…

2024系统架构师---论软件维护方法及其应用

论软件维护方法及其应用 软件维护是指在软件交付使用后&#xff0c;直至软件被淘汰的整个时间范围内&#xff0c;为了改正错误或满足新的需求而修改软件的活动。在软件系统运行过程中&#xff0c;软件需要维护的原因是多种多样的。根据维护的原因不同可以将软件维护分为改正性…

C语言_指针_进阶

引言&#xff1a;在前面的c语言_指针初阶上&#xff0c;我们了解了简单的指针类型以及使用&#xff0c;下面我们将进入更深层次的指针学习&#xff0c;对指针的理解会有一个极大的提升。从此以后&#xff0c;指针将不再是难点&#xff0c;而是学习底层语言的一把利器。 本章重点…

MySQL中查询语句的执行流程

文章目录 前言流程图概述最后 前言 你好&#xff0c;我是醉墨居士&#xff0c;今天我们一起探讨一下执行一条查询的SQL语句在MySQL内部都发生了什么&#xff0c;让你对MySQL内部的架构具备一个宏观上的了解 流程图 概述 对于查询语句的SQL的执行流程&#xff0c;主要可以分为…

青少年编程能力等级测评CPA C++(二级)试卷(2)

青少年编程能力等级测评CPA C&#xff08;二级&#xff09;试卷&#xff08;2&#xff09; 一、单项选择题&#xff08;共20题&#xff0c;每题3.5分&#xff0c;共70分&#xff09; CP2_2_1&#xff0e;下列C程序段中&#xff0c;对二维数组arr的定义不正确是&#xff08; &…

(新手入门篇)2024年10 月 Java JDK 1.8版本WIN 10 系统安装教程!!!!!!!

前言 IDEA的安装是Java课程的入门&#xff0c;对于刚入门的小白来说&#xff0c;安装jdk是必不可少的一个环节&#xff0c;当然&#xff0c;很多的老同学进入新公司装环境也是不可或缺的&#xff0c;本人也是经常会碰到类似的场景&#xff0c;为避免后续忘记&#xff0c;选择记…

SHA256算法学习

SHA-256&#xff08;Secure Hash Algorithm 256-bit&#xff09;是一种常用的哈希算法&#xff0c;是SHA-2家族中的一种。它可以将任意长度的数据转换为一个固定长度的256位&#xff08;32字节&#xff09;哈希值。 算法特点 固定长度输出&#xff1a;无论输入数据有多长&…

flutter assets配置加载本地图片报错

首选列出我在照着网上说的设置assets怎么搞都报错&#xff0c;错误如下&#xff0c;搞的我想骂娘。 flutter: uses-material-design: true assets: - assets/images 后来找到了下面这个教程&#xff0c;才终于解决&#xff0c;就是要在后面加一个"/" 。 flutter这个…

【JVM】—深入理解ZGC回收器—背景概念回收流程

深入理解ZGC回收器—背景概念&回收流程 ⭐⭐⭐⭐⭐⭐ Github主页&#x1f449;https://github.com/A-BigTree 笔记链接&#x1f449;https://github.com/A-BigTree/Code_Learning ⭐⭐⭐⭐⭐⭐ 如果可以&#xff0c;麻烦各位看官顺手点个star~&#x1f60a; 文章目录 深入…

韩信走马分油c++

韩信走马分油c 题目算法代码 题目 把油桶里还剩下的10斤油平分&#xff0c;只有一个能装3斤的油葫芦和一个能装7斤的瓦罐。如何分。 算法 油壶编号0&#xff0c;1&#xff0c;2。不同倒法有&#xff1a;把油从0倒进0&#xff08;本壶到本壶&#xff0c;无效&#xff09;&…

YoloV9改进策略:主干网络改进|DeBiFormer,可变形双级路由注意力|全网首发

摘要 在目标检测领域&#xff0c;YoloV9以其高效和准确的性能而闻名。然而&#xff0c;为了进一步提升其检测能力&#xff0c;我们引入了DeBiFormer作为YoloV9的主干网络。这个主干网络的计算量比较大&#xff0c;不过&#xff0c;上篇双级路由注意力的论文受到很大的关注&…

Centos7搭建minio对象存储服务器

Centos7搭建minio对象存储服务器 安装二进制程序配置服务文件 安装二进制程序 参考&#xff1a;https://segmentfault.com/q/1010000042181876 minio中国版&#xff1a;https://www.minio.org.cn/download.shtml#/linux # 下载二进制程序 wget https://dl.min.io/server/min…