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

效果图如下：

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。