uniapp实现路线规划-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp实现路线规划。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

UniApp是一个基于Vue.js框架开发的跨平台应用开发框架，可以同时构建iOS、Android、H5等多个平台的应用。它使用了基于前端技术栈的Web开发方式，通过编写一套代码，即可在不同平台上运行和发布应用。

UniApp具有以下特点：

跨平台开发：UniApp支持将一套代码同时转换为iOS、Android、H5等多个平台的应用，大大节省了开发时间和成本。
兼容性强：UniApp基于Vue.js框架，结合了各个平台的原生能力，可以调用设备的硬件功能，提供丰富的API接口，满足各种应用的需求。
开发便捷：UniApp使用Vue.js的开发语法，配合强大的插件系统和组件库，使得开发过程更加高效和简洁。
性能优化：UniApp针对不同平台做了性能优化，实现了快速启动和流畅的用户体验。
社区活跃：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文件如下配置

uniapp实现路线规划,uni-app

然后你需要在腾讯地图下载qqmap-wx-jssdk1.2.zip压缩包；

路径：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

uniapp实现路线规划,uni-app

将下载好的压缩包解压然后将其qqmap-wx-jssdk.js文件放到项目文件中；然后将其引入

uniapp实现路线规划,uni-app

在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"为是否显示路线

希望对您有所帮助文章来源地址https://www.toymoban.com/news/detail-739763.html

到了这里，关于uniapp实现路线规划的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！