小程序线多点路图绘制

需求

当接口返回一连串地图坐标,需要根据这些坐标串联起来,形成一个线路图(本次使用步行导航线路图)。

思路

  1. 首先优先想到使用小程序Map组件的polyline属性去进行展示。但是我们发现直接使用该属性进行坐标绘制画出来的数据都是直线。所以想要根据地图上的线路图进行绘制必须使用第三方提供的绘制线路图的api。这里使用腾讯地图api
  2. 将第三方api进行简单封装,然后根据后端返回的坐标组,两两相连调用api。
    const demo = [{longitude: 1,latitude: 1},{longitude: 2,latitude: 2},{longitude: 3,latitude: 3},{longitude: 4,latitude: 4},
    ]
    
    如上这样一组数据我们就应该传入demo[1], demo[2]拿到线路,然后再传入demo[2], demo[3]再次拿到下一段路线,知道拿到最后一个线路为止,最后进行拼接展示。

具体实现

1. 首先让我们对第三方的api进行简单封装

在这里插入图片描述
从官网给的参数列表来看,我们至少需要key,form,to三个参数,而且form跟to的传参方式比较特殊,而我们一般使用对象传递,所以需要我们进行参数转换

export const apiGetPolylineList = (data) => {const [from, to] = datareturn new Promise((resolve, reject) => {uni.request({url: `https://apis.map.qq.com/ws/direction/v1/walking/?from=${from.latitude},${from.longitude}&to=${to.longitude},${to.longitude}&key=${txMapKey}`,complete: (res) => {if (res.data.status === 0) {resolve(res.data.result.routes[0])}else {uni.showToast({title: '线路加载失败',icon: 'error'})reject('线路加载失败')}}})})
}

2.接下来根据后端返回的坐标组,两两相连调用api。

// 创建测试数据
const testData = [{latitude: 30.868603,longitude: 103.934669},{latitude: 30.852555,longitude: 103.934843},{latitude: 30.851977,longitude: 103.92361},{latitude: 30.843044,longitude: 103.962646}
]

既然需要两两调用,我们在一开始就将他们分好。

const getTwoSpotList = (testData) => {const list = []testData.reduce((pre, next) => {list.push([pre, next])return next})return list
}

既然我们要进行接口的多次调用,那不如我们直接使用Promise.all对结果进行统一处理

const getLineData = async () => {const twoSpotList= getTwoSpotList(testData)const apiList = twoSpotList.map(item => apiGetPolylineList(item))const lineData = await Promise.all(apiList)const polylineListRes = getLineData(lineData)
}

我们拿到的数据关于线路图的就是polyline字段,格式为:[坐标1纬度 , 坐标1经度 , 坐标2纬度 , 坐标2经度 , 坐标3纬度 , 坐标3经度…],第一个坐标为原始未被压缩过的,之后的使用前向差分进行压缩,我们需要进行解压合并操作。

const getLineData = async (lineData) => {//推荐使用lodash这样的成熟库里面的深拷贝方法,这里为了简单直接使用JSON.parse(JSON.stringify(lineData))  const polylineList = JSON.parse(JSON.stringify(lineData))  .map((item) => item.polyline).reduce((pre, next) => {const newNext = nextfor (var i = 2; i < newNext.length; i++) {newNext[i] = newNext[i - 2] + newNext[i] / 1000000}let resList = []for (var j = 0; j < newNext.length; j++) {resList.push({latitude: parseFloat(newNext[j].toFixed(5)),longitude: parseFloat(newNext[j + 1].toFixed(5)),})j++}return pre.concat(resList)}, [])return polylineList }

在这里插入图片描述

虽然官网没有说,但是polyline其实是一个对象数组,每一个对象都是表示一段线段,所以我们线路一般有两种展示形式:1.直接合并在为一个数组放进points里面,这种方式适合每条线段样式一致,不需要单独处理的情况。如果我们需要针对每条线段做定制化的需求,可以创建多个对象的形式进行展示。本文使用第一种方式。

最后我们直接使用拿到的数据

<mapstyle="width: 100%; height: 800rpx":longitude="103.934669":latitude="30.868603":polyline="[{points: polylineListRes,color: '#000',width: 3,dottedLine: false,},]"></map>

在这里插入图片描述

不积跬步无以至千里,不积小流无以成江海。

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

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

相关文章

STL--string详解

STL基本内容 string是什么 string实质上是一个对象 string可看作一个串&#xff0c;类似字符数组 可以扩容&#xff0c;可以增删查改 可用下表访问操作符[]引用&#xff0c;修改某值 构造函数 默认构造 拷贝构造&#xff1a;参数为(string 或 char*) 求string对象的长度不…

ruoyi-cloud-plus的bom

ruoyi-cloud-plus项目下关于bom有两个macen模块&#xff0c;分别是 ruoyi-api-bomruoyi-common-bomruoyi-common-bom bom模块的作用是对所有的maven模块的版本进行控制&#xff0c;所有同级别的maven模块都是可以依赖bom模块。 依赖顺序是父类模块dependencyManagement依赖下…

逻辑回归模型与GBDT+LR——特征工程模型化的开端

随着信息技术和互联网的发展&#xff0c; 我们已经步入了一个信息过载的时代&#xff0c;这个时代&#xff0c;无论是信息消费者还是信息生产者都遇到了很大的挑战&#xff1a; 信息消费者&#xff1a;如何从大量的信息中找到自己感兴趣的信息&#xff1f;信息生产者&#xff…

PMBOK® 第六版 项目是什么

目录 读后感—PMBOK第六版 目录 项目定义 定义&#xff1a;项目是为创造独特的产品、服务或成果而进行的临时性工作。 项目的特征具备以下三点&#xff1a; 独特性&#xff1a;独一无二&#xff0c;无法简单重复过去的做法。 临时性&#xff1a;项目有明确的起点和终点&…

EOCR-i3MS-WRDUW电机保护器 韩国三和 进口施耐德

韩国三和&#xff0c;EOCR&#xff0c;SAMWHA&#xff0c;Schneider&#xff0c;施耐德&#xff0c;电机保护器&#xff0c;电动机保护器&#xff0c;电子式电动机保护继电器&#xff0c;电子式过电流继电器&#xff0c;电子式欠电流继电器&#xff0c;电子式电压继电器&#x…

一起陪伴走过20多年,XILINX五大系列CPLD/FPGA将于6月截止接单

一起陪伴走过20多年&#xff0c;XILINX五大系列CPLD/FPGA将于6月截止接单 Product Discontinuation Notice AMD/XILINX于2024年春节后&#xff0c;发布了最新的产品停产通知&#xff0c;产品系列包括&#xff1a;XC9500XL, CoolRunner XPLA 3, CoolRunner II, Spartan II, a…

css中新型的边框设置属性border-block

border-block 是 CSS 中的一个属性&#xff0c;主要用于在样式表中一次性设置元素的逻辑块向边框的属性值。这个属性是简写属性&#xff0c;可以同时设置 border-block-width、border-block-style 和 border-block-color。其中&#xff0c;border-block-start 用于设置元素的开…

Lagent AgentLego 智能体应用搭建-笔记六

本次课程由Lagent&AgentLego 核心贡献者樊奇老师讲解【Lagent & AgentLego 智能体应用搭建】课程 课程视频&#xff1a;https://www.bilibili.com/video/BV1Xt4217728/ 课程文档&#xff1a;https://github.com/InternLM/Tutorial/tree/camp2/agent 大语言模型的局限…

2024全国大学生高新技术竞赛——算法智星挑战赛(A~J)

好多都是之前的原题&#xff0c;甚至有上次第二届全国大学生信息技术认证挑战赛的原题&#xff0c;刚打完又来一遍&#xff0c;没绷住。 A. 手机 原题之一&#xff0c;具体出处忘了 最无脑的方法直接用map记录每个按下的值就行了&#xff0c;代码仅供参考。 #include <bit…

appium相关的知识

>adb shell dumpsys window | findstr mCurrentFocus adb devices # 实例化字典 desired_caps = dict() desired_caps[platformName] = Android desired_caps[platformVersion] = 9 # devices desired_caps[deviceName] = emulator-5554 # 包名 desired_caps[appPackage] …

【云原生系列】云计算概念与架构设计介绍

1 什么是云计算 云计算是一种基于互联网的计算模式&#xff0c;在这个模式下&#xff0c;各种计算资源&#xff08;例如计算机、存储设备、网络设备、应用程序等&#xff09;可以通过互联网实现共享和交付。云计算架构设计的主要目标是实现高效、可扩展、可靠、安全和经济的计算…

Android Studio开发之路(八)Spinner样式设置

一、需求 白色背景显示下拉框按钮 问题&#xff1a; 设置Spinner的背景可以通过设置background&#xff1a; android:background"color/white",但是一旦设置了这个值&#xff0c;右侧的下拉按钮就会消失 方法一、自定义一个style&#xff08;不成功&#xff09; …

Packet Tracer - 交换机安全配置解析

第一步先连线SW1连到SW2接口连接G0/2到G0/2 指令配置 SW-1 SW-1>enable SW-1#conf t Enter configuration commands, one per line. End with CNTL/Z. SW-1(config)#interface range G0/1-2 SW-1(config-if-range)#switchport mode SW-1(config-if-range)#switchport no…

多批道处理算法

一、实验目的&#xff1a; 了解多道批处理系统的工作原理和调度算法熟悉先来先服务调度算法&#xff08;First Come First Served, FCFS&#xff09;的实现学习如何模拟多道批处理系统的调度过程 实验设备与实验环境&#xff1a; 计算机,Java编译系统,idea,ChatGPT 二、实验程…

Golang实现一个批量自动化执行树莓派指令的软件(8)辅助模块-远程IP端口是否开放连接(TCP)

简介 基于 上篇 Golang实现一个批量自动化执行树莓派指令的软件(7)辅助模块-本地活动网络&#xff0c; 看看本地活动网络接口网络里面有哪些设备是支持ssh网络的。 环境描述 运行环境: Windows&#xff0c; 基于Golang&#xff0c; 暂时没有使用什么不可跨平台接口&#xff0c;…

Linux驱动开发——(八)Linux异步通知

目录 一、异步通知简介 二、信号处理 2.1 驱动程序中的处理 2.1.1 fasync_struct结构体 2.1.2 fasync操作函数 2.1.3 kill_fasync函数 2.2 应用程序中的处理 三、驱动代码 一、异步通知简介 异步通知的核心就是信号。信号类似于硬件上使用的中断&#xff0c;只不过信号…

TCP协议是如何保证数据可靠传输的?

一、什么样的数据传输是可靠的&#xff1f; 数据正确&#xff1a;传递 123 &#xff1b;接收 123数据顺序正确&#xff1a;传递123 &#xff1b;接收不能是 321或其他数据不重复&#xff1a;传递123 &#xff1b;接收不能是1223或其他数据不被篡改&#xff1a;传递 123 &#…

sqlserver 开启发布订阅模式

主服务器 用于发布与分发 从服务器 订阅 分发服务器的概念&#xff0c;是指用于管理发布与订阅的交互&#xff0c;这里用发布服务器充当即可 主服务器操作&#xff1a; 按需选择&#xff0c;一般选择快照发布 如果不需要排除列则不做任何选择 定义执行时间 这里配置连接到…

WPF之RadioButton单选框和checkbox多选框

RadioButton 单选框: 实现分组的单选框&#xff0c; checkbox 多选框: 表示用户可以选择和清除的控件。 常用属性 GroupName 获取或设置指定哪些 RadioButton 控件互相排斥的名称Content内容IsChecked是否选中 常用事件 checked 选中的事件unchecked 未选中的事件 RadioBu…

Linux server

查看服务器版本&#xff1a; rootpsh-ats-02:/# cat /etc/issue Ubuntu 16.04.3 LTS \n \l rootpsh-ats-02:/# chromedriver --version ChromeDriver 103.0.5060.53 (a1711811edd74ff1cf2150f36ffa3b0dae40b17f-refs/branch-heads/5060{#853}) rootpsh-ats-02:/# google-chrome…