如何在页面中使用高德地图并分页展示多段历史轨迹
- 引入高德地图的JavaScript API
打开index.html(key-后面的内容是你自己在高德上申请 的key) 
- 引入高德组件
- 配置webpack
找到webpack.base.conf.js文件，找到module.exports,在externals中加上一行’AMap’: ‘AMap’
externals{
'AMap': 'AMap'
},
- 在页面中引入高德地图
import AMap from 'AMap'
- 页面挂载时加载地图(调用自定义方法)
mounted(){
this.getHisGpsInfo(this.bizDate)
},
- 定义的加载地图轨迹的方法
// 这个方法主要是调用自己的接口获取数据以及定义参数 bizDate是查询日期
getHisGpsInfo(bizDate){
let params={
sDate:bizDate,//日期
devNum:this.$route.query.devNum//前一个页面传来的参数设备名称
}
// 调用接口 获取数据
NetUtil.doGetOpera('/fhGps/getHisFhGpsInfo02',{params},json=>{
let data=json.data;// data是数组类型 let的数据data仅在当前方法体中有效 主要用于判断是否有数据
if (data==undefined||data==null||data.length==0){
return;
}
//有数据的情况下
this.list=json.data;
this.currentPage=1;// 由于每辆车当天有不同时间段的车程 所以有几段历史轨迹会在不用页面上展示
this.totalPage=json.data.length;//数组的长度即有几个历史轨迹
this.drawMap() // 调用绘制轨迹的方法
},error=>{
Toast(error)
})
},
//绘制地图轨迹
drawMap(){
let pathData=this.list[this.currentPage-1] // 当前页的data数据即当天的第(this.currentPage-1)个轨迹数据
let colorIndex=this.currentPage%5; // 当前页取余5 如果是第一页的话 结果为1 [0,4] 因为一个页面就能看5个页面之后就翻面了(分页自定义 看你一个页面想显示几段轨迹了，注意这里不是地图上显示几段轨迹)
let color=this.colors[colorIndex];
this.item=pathData
let name=pathData.name;// 0-21-02-26路线 类似于这种
this.distance=pathData.distance;// 行驶里程？ 都是0
this.startTime=pathData.beginTime;// 开始时间
this.endTime=pathData.endTime;// 结束时间
console.log(JSON.stringify(pathData))
let map = new AMap.Map('container', {
zoom: 13,
center: pathData.paths[0]
});
function onerror(e) {
//alert('图片加载失败！');
}
AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {
if (!PathSimplifier.supportCanvas) {
alert('当前环境不支持 Canvas！');
return;
}
var pathSimplifierIns = new PathSimplifier({
zIndex: 100,// 绘制用图层的叠加顺序值
//autoSetFitView:false,
map: map, //所属的地图实例
//pathData轨迹数据项 pathIndex轨迹索引
getPath: function(pathData, pathIndex) {
// 返回的是轨迹的节点坐标数组
return pathData.path;
},
// 鼠标在轨迹上显示的内容 pointIndex 是轨迹节点索引
getHoverTitle: function(pathData, pathIndex, pointIndex) {
// 表明鼠标悬停在某个节点上
if (pointIndex >= 0) {
//point
return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length;
}
// 鼠标悬停在节点之间的连线上
return pathData.name + '，点数量' + pathData.path.length;
},
renderOptions: {
renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
}
});
function onload() {
//alert('图片显示')
pathSimplifierIns.renderLater();
}
window.pathSimplifierIns = pathSimplifierIns;
// setData设定数据源数组 并触发重新绘制
pathSimplifierIns.setData([{
name: name,
path: pathData.paths
}]);
// 创建巡航器
let nav = pathSimplifierIns.createPathNavigator(0, {
loop: false,// 巡航器是否一直循环 false就是只放一遍
speed: 50000,// 巡航器速度 千米/小时
// 自定义巡航器样式
pathNavigatorStyle: {
initRotateDegree: 0,
width: 16,// 这里是巡航器箭头的宽高
height: 16,
autoRotate: true,// 是否根据路径方向进行角度旋转
lineJoin: 'round',
content: 'defaultPathNavigator',//巡航器的内容 defaultPathNavigator（默认）, circle（圆形），none（空）
//content: PathSimplifier.Render.Canvas.getImageContent('../../assets/image/gps_track.png', onload, onerror),
fillStyle: color,// 填充色
strokeStyle: color,// 描边色
lineWidth: 6,// 箭头处线宽？ 描边宽度
// 巡航器经过的路径的样式
pathLinePassedStyle: {
lineWidth: 2,// 线宽
strokeStyle: color,// 线颜色
borderWidth: 1,// 描边宽度
borderStyle: color,//描边颜色
dirArrowStyle: false// 方向箭头样式 lineWidth>=4时有效属性继承pathlineStyle 为true时使用默认配置
}
}
});
// 开启路径巡航
nav.start();
});
},
