联系作者Q/V:783021975

Tips:

1.高德好的方法非同步执行。一定要注意执行顺序或等待执行完成再进行具体的操作

2.高德地图不支持label旋转哦~

3.百度是支持的。可以参考 百度地图实现轨迹回放（显示到达时间）_博客-CSDN博客_百度地图轨迹回放使用了百度路书直接上代码，添加秘钥直接运行<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="https://blog.csdn.net/weixin_42244754/article/details/87860709

先看下效果

代码

<!doctype html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><title>轨迹回放</title><link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/><style>html, body, #container {height: 100%;width: 100%;font-family: "微软雅黑";}.input-card .btn{margin-right: 1.2rem;width: 9rem;}.input-card .btn:last-child{margin-right: 0;}.amap-marker-content img{width: 25px;height: 34px;}.amap-marker-label{border: 0;background-color: transparent;}.info{position: relative;top: 0;right: 0;min-width: 0;font-size: 16px;border: 1px solid rgb(204, 204, 204);}</style>
</head>
<body>
<div id="container"></div>
<div class="input-card"><h4>轨迹回放控制</h4><div class="input-item"><input type="button" class="btn" value="开始动画" id="start" onclick="startAnimation()"/><input type="button" class="btn" value="暂停动画" id="pause" onclick="pauseAnimation()"/></div><div class="input-item"><input type="button" class="btn" value="继续动画" id="resume" onclick="resumeAnimation()"/><input type="button" class="btn" value="停止动画" id="stop" onclick="stopAnimation()"/></div>
</div>
<script type="text/javascript"src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.Driving"></script>
<script>//只要起点 和 终点的 经纬度信息var markerB = [[120.208156,30.253687],[120.206873,30.251105]];//baiduvar coords = [[120.200598,30.257652],[120.201386,30.257618],[120.200816,30.251847]]var lineArr;var polyline;var passedPolyline;//AMap.DrivingPolicy.LEAST_TIME 最快捷模式//AMap.DrivingPolicy.LEAST_FEE 最经济模式//AMap.DrivingPolicy.LEAST_DISTANCE 最短距离模式//AMap.DrivingPolicy.REAL_TRAFFIC 考虑实时路况//驾车策略基础信息var drivingOption = {policy: AMap.DrivingPolicy.LEAST_DISTANCE,ferry: 1,}//创建地图。中心点、缩放等级var map = new AMap.Map("container", {resizeEnable: true,center: [markerB[0][0],markerB[0][1]],zoom: 17});// 构造路线导航类var driving = new AMap.Driving(drivingOption,{map:map})addCar('京A 88888');//规划路线得到坐标// 根据起终点经纬度规划驾车导航路线driving.search(new AMap.LngLat(markerB[0][0],markerB[0][1]),new AMap.LngLat(markerB[1][0],markerB[1][1]),function(status, result) {if (status === 'complete') {if (result.routes && result.routes.length) {var path = parseRouteToPath(result.routes[0])lineArr = path;addMarker(path);drawTrack(path)drawPassedPolyLine();map.setFitView();console.info('绘制驾车路线完成')}} else {console.info('获取驾车数据失败：' + result)}});// 绘制轨迹function drawTrack(path) {polyline = new AMap.Polyline({map: map,path: path,showDir:true,strokeColor: "#18a45b",  //线颜色strokeWeight: 6,      //线宽});}// 绘制运动轨迹样式function drawPassedPolyLine() {passedPolyline = new AMap.Polyline({map: map,strokeColor: "#AF5",  //线颜色strokeWeight: 6,      //线宽});}/*增加轨迹回放的小汽车和车牌@param plate - 车牌*/function addCar(plate) {marker = new AMap.Marker({map: map,zIndex:9999,position: [markerB[0][0],markerB[0][1]],icon: "http://lbsyun.baidu.com/jsdemo/img/car.png",offset: new AMap.Pixel(-26, -13),autoRotation: true,label:{ content:"<div class='info'>"+plate+"</div>",offset: new AMap.Pixel(-26, -35),autoRotation: true}});}// 实例化点标记function addMarker(path) {path.forEach(function(marker) {new AMap.Marker({map: map,position: [marker.lng,marker.lat],offset: new AMap.Pixel(-13, -30)});});}/**********起点ICON**********/var startMarker = new AMap.Marker({position: markerB[0],icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',map: map})/**********终点ICON**********/var endMarker = new AMap.Marker({position: markerB[markerB.length - 1],icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',map: map})// 调整视野达到最佳显示区域map.setFitView([startMarker,endMarker])marker.on('moving', function (e) {passedPolyline.setPath(e.passedPath);});/**********动画 START**********/function startAnimation () {marker.moveAlong(lineArr,200);}function pauseAnimation () {marker.pauseMove();}function resumeAnimation () {marker.resumeMove();}function stopAnimation () {marker.stopMove();}/**********动画 END**********/// 解析DrivingRoute对象，构造成AMap.Polyline的path参数需要的格式function parseRouteToPath(route) {var path = []for (var i = 0, l = route.steps.length; i < l; i++) {var step = route.steps[i]for (var j = 0, n = step.path.length; j < n; j++) {path.push(step.path[j])}}return path}//坐标转换function convert() {var lnglats;AMap.convertFrom(coords, 'baidu', function (status, result) {if (result.info === 'ok') {lnglats = result.locations;alert(lnglats);}});}
</script>
</body>
</html>

高德地图实现路线规划+轨迹回放（显示车牌）相关推荐

Android 高德地图中路线规划绘制界面线路
Android 高德地图中路线规划绘制界面线路下面代码是根据很多的经纬度的点,绘制出直线的线路.比较死板 /*** 绘制景区的路线*/private void setRouteInfo(List&l ...
Android高德地图多路线规划----可点击选择路线
最近项目上有用到高德sdk,需求上要求多路线规划,并且可以在地图上点击选择路线.本着不想重复造轮子的驱使下(其实想偷懒),网上似乎没有例子,也可能是我找不到.最后没办法,只能自己实现. 在此做为记录, ...
JSAPI 高德地图应用--车辆的轨迹回放、并附有信息框（上）
关于车辆的轨迹回放功能方法,主要分为两种,一种是通过标记点moveAlong()的方法,另一种是PathSimplifier是一个轨迹展示组件:两种方法,各有各的优缺点,前者是比较简单,但是不能在中途 ...
高德地图API路线规划
高德地图API基础使用高德地图API体验申请Key 初体验添加插件点击事件返回地址值两点之间获取驾车导航路线高德地图API体验申请Key 申请高德地图账号登录后,应用管理下创建自己的应 ...
高德地图之路线规划多点路线规划路线最短原则之二 TSP算法
经过这段时间的使用和研究,我发现点和点之间的最短路线并不是最优的.针对所有点的组合可能, 得到的最短路线才是最好的(也就是TSP方法),然后再结合点对点之间的距离进行比较,得到的才是相对最优方案. 举 ...
uniapp H5端使用高德地图完成路线规划
本项目是H5端,APP端地图的使用方法请参考我的另一篇博客uniapp,map地图组件打包原生APP 首先到高德地图API,申请web端key 参考高德H5端教程开始写代码高德地图JS API 1.准 ...
android 步行距离,Android 高德地图步行路线规划
路线规划就是给RouteSearch设置一个监听,里面有步行规划,骑车,驾车,公交等线路的规划第 1 步,初始化 RouteSearch 对象 routeSearch = new RouteSear ...
Android 高德地图步行路线规划
路线规划就是给RouteSearch设置一个监听,里面有步行规划,骑车,驾车,公交等线路的规划第 1 步,初始化 RouteSearch 对象 routeSearch = new RouteSear ...
JSAPI 高德地图应用--车辆的轨迹回放、并附有信息框（下）
上篇文章提到了车辆的轨迹回放主要有两个方案:一种是通过标记点moveAlong()的方法,另一种是PathSimplifier是一个轨迹展示组件:上篇使用了标记点的方法,这篇就来使用PathSimpl ...

高德地图实现路线规划+轨迹回放（显示车牌）

先看下效果

代码

高德地图实现路线规划+轨迹回放（显示车牌）相关推荐

最新文章

热门文章