uniapp map组件的markers，polyline使用及问题

最新推荐文章于 2024-09-13 10:05:12 发布

M _chen

最新推荐文章于 2024-09-13 10:05:12 发布

阅读量4.5k

点赞数 1

分类专栏： uniapp 文章标签： uni-app map

本文链接： https://blog.csdn.net/weixin_55532289/article/details/121511639

版权

uniapp 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

最近在做巡检任务功能，需要在安卓端记录当前巡检轨迹，以及原本的路线显示，由于是使用uniapp框架开发的，所以这里我使用的是uniapp里的map组件。

参考官方文档：https://uniapp.dcloud.io/component/map?id=map

注意：地图组件用于展示地图，而定位API只是获取坐标，请勿混淆两者。

一、获取当前位置:
type:默认为 wgs84 返回 gps 坐标，gcj02 返回国测局坐标，可用于 uni.openLocation 的坐标，app平台高德SDK仅支持返回gcj02

//获取当前的地理位置
uni.getLocation({
    type: 'gcj02',
    success: function (res) {
        console.log('当前位置的经度：' + res.longitude);
        console.log('当前位置的纬度：' + res.latitude);
    }
});

二、在地图上画线（我这里通过请求接口数据，得到线上的经纬度信息）

// 获取巡检线路信息(包含线路光缆路由列表)
initLine(lineid) {
		api.getPatrolLine(lineid).then(res => {
			console.log(res.data.result.lineRouter);
			const points = [];
			const temp = [];
			// 第一层循环
			res.data.result.lineRouter.forEach((line, index1) => {
				// console.log("index1",index1)
				//第二层循环
				line.geometry.forEach((item, index2) => {
					// console.log("index2",index2)
					points.push({
						latitude: item.lat,
						longitude: item.lng
					});
					temp.push({
						id: index1 * 100000 + index2, //避免下标重复
						latitude: item.lat, //纬度
						longitude: item.lng, //经度
						iconPath: '/static/maps/all_location.png', //显示的图标        
						rotate: 0, // 旋转度数
						width: 40, //宽
						height: 40, //高
						title: item, //标注点名
						alpha: 1, //透明度
						// joinCluster: true, //是否参与点聚合
					})
		
				});
			});
			// 偏离路线距离计算
			this.taskPoints = points;
			// 点聚合：解决标记点marker过多时会导致界面上 marker 出现压盖，展示不全问题
			const taskLine = { //路线
				points: points, //经纬度数组
				color: '#007aff', //线的颜色
				width: 10, //线的宽度
				borderWidth: 2, //线的厚度
				// borderColor: '#ff0000', //线的边框颜色
				dottedLine: false, //是否虚线
				arrowLine: false //带箭头的线 开发者工具暂不支持该属性
			}
			// console.log(taskLine)
			this.polyline[0] = taskLine; //巡检路线
			this.polyline[1] = this.myPolyline; //记录当前的轨迹路线
			this.polyline = [...this.polyline] //需要结构，视图才更新
			// console.log(this.polyline);
			this.markers = temp //标记点
			this.markers = [...this.markers] //需要结构，视图才更新
			// console.log(this.markers)
			this.myIndex = this.markers.length; //获取标记点的下标开始值，防止下标重复
			
		})
		.catch(e => {
			console.log(e);
		});
		},