调用高德地图展示车辆行驶轨迹

如何在页面中使用高德地图并分页展示多段历史轨迹

引入高德地图的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=pathDatalet name=pathData.name;// 0-21-02-26路线 类似于这种this.distance=pathData.distance;// 行驶里程？ 都是0this.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) {//pointreturn 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();});},

调用高德地图展示车辆行驶轨迹相关推荐

JSAPI 高德地图应用--车辆的轨迹回放、并附有信息框（上）
关于车辆的轨迹回放功能方法,主要分为两种,一种是通过标记点moveAlong()的方法,另一种是PathSimplifier是一个轨迹展示组件:两种方法,各有各的优缺点,前者是比较简单,但是不能在中途 ...
JSAPI 高德地图应用--车辆的轨迹回放、并附有信息框（下）
上篇文章提到了车辆的轨迹回放主要有两个方案:一种是通过标记点moveAlong()的方法,另一种是PathSimplifier是一个轨迹展示组件:上篇使用了标记点的方法,这篇就来使用PathSimpl ...
高德地图api接口文档_在 R 语言里面调用高德地图接口：地理编码与路径规划
你知道从广州南站去珠江新城怎么走么?今天就让我们一起使用 R 语言调用高德地图的地理编码(地址转经纬度)接口和路径规划接口来回答这个问题. 准备工作注册高德地图,创建应用添加 Key(注意申请 Ke ...
使用高德地图API实现历史轨迹查询
欢迎大家关注我的公众号,有问题可以及时和我交流. 使用高德地图API完成历史轨迹查询创作背景相关技术设计思路实现难点编码实现实现效果创作背景因为对历史轨迹查询比较好奇,所以使用 ...
vue项目中调用高德地图vue-amap 插件的AMap.PlaceSearch简用
vue项目调用高德地图vue-amap 插件的AMap.PlaceSearch简用结合 elementui 的 el-input 直接下拉选取地点不展示地图 1.下载 npm install v ...
js如何同时打开多个信息窗口高德地图_高德地图-展示多个信息窗口
1.问题背景高德地图,设置小图标,并点击图标显示信息 2.实现源码高德地图展示多个信息窗口 //初始化地图对象,加载地图 var map = new AMap.Map("containe ...
python调用高德地图api 可视化_Python：利用高德地图API实现找房
记:本项目是在实验楼上看到的,但是上面的代码由于没有及时维护,爬虫文件的代码不再能完整的把所有房源信息爬取下来,我根据最新的58同城官网进行了研究,现在的官网的房源信息已经不是分页的了,而是拉到最后自 ...
第三方应用调用高德地图
http://www.eoeandroid.com/thread-540298-1-1.html 项目中要直接调用高德地图应用,而不是高德地图API. 点击直接调用高德地进行导航,肯定需要传参数的,发 ...
java获取经纬度_java调用高德地图api获取某个位置的经纬度
java调用高德地图api获取经纬度的方法,废话少说,直接上代码: import com.fasterxml.jackson.databind.JsonNode; import com.ning.ht ...

调用高德地图展示车辆行驶轨迹

如何在页面中使用高德地图并分页展示多段历史轨迹

调用高德地图展示车辆行驶轨迹相关推荐

最新文章

热门文章