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

最新推荐文章于 2024-07-23 16:15:31 发布

m0_54850825

最新推荐文章于 2024-07-23 16:15:31 发布

阅读量978

点赞数

分类专栏：前端 html 文章标签： npm 前端 node.js

本文链接：https://blog.csdn.net/m0_54850825/article/details/123265766

版权

本文介绍了如何在uniapp框架下利用map组件实现巡检任务的轨迹记录和路线显示。通过设置map组件获取当前位置，并利用polyline绘制路径。内容包括配置获取坐标类型、画线方法及实际效果展示。

摘要由CSDN通过智能技术生成

最近在做巡检任务功能，需要在安卓端记录当前巡检轨迹，以及原本的路线显示，由于是使用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.re