百度地图显示车辆运行轨迹（动态轨迹回放功能） |
您所在的位置：网站首页 › 百度地图行走记录轨迹怎么看 › 百度地图显示车辆运行轨迹（动态轨迹回放功能） |
百度地图显示车辆运行轨迹（动态轨迹回放功能）
|
百度地图开发常用网站
1、百度地图开放平台
百度地图开放平台 | 百度地图API SDK | 地图开发
2、百度地图 Javascript API
JavaScript API v3.0 http://lbsyun.baidu.com/index.php?title=jspopular3.0 JavaScript API v2.0 http://lbsyun.baidu.com/index.php?title=jspopular JavaScript API Lite http://lbsyun.baidu.com/index.php?title=jspopularLiteV1
3、JavaScript API v2.0类参考
百度地图JSAPI 2.0类参考
4、百度地图示例DEMO（JavaScript API v2.0）
地图JS API示例 | 百度地图开放平台
5、百度地图 ak 申请：（JavaScript API v2.0）
jspopular | 百度地图API SDK
6、开源库（JavaScript API v2.0）：鼠标绘制工具条、热力图、聚合marker、测距工具、自定义覆盖物、自定义信息窗口、路书等功能
jspopular | 百度地图API SDK
7、百度地图坐标拾取系统
拾取坐标系统
说明
项目中使用 JavaScript API v2.0 版本，当然也可以使用最新版 V3.0。
JavaScript API Lite是移动端浏览器上构建地图应用
百度地图显示车辆轨迹
1、百度地图 ak 申请：（JavaScript API v2.0）
2、实现效果图如下： 首先说明一下，这个功能主要是完成后台在地图上图层显示车辆的运行轨迹（线）动态效果，一般车辆的轨迹可能通过app采集 或 车载终端上传到服务器。这里的车辆轨迹线显示还是保留，车辆在上面运行更加直观的显示。 这里用到的百度地图开源库中的路书功能：jspopular | 百度地图API SDK
上面的轨迹运行图是官方给的demo，我们这里换了车辆图标，最终效果图如下： 3、源代码： 百度地图显示车辆运行轨迹（静态） //添加鼠标单击事件、鼠标触发事件 function addMarkerClickHandler( content, marker , showType) { //图层点击事件，像是详细信息 marker.addEventListener("click", function (e) { openInfo(content, e); }); //鼠标经过图层时的操作 marker.addEventListener("mouseover", function (e) { marker.setTop(true);//设置显示在最上面，防止多图层显示在相同位置时 无法知道时哪个图层 marker.setIcon(icon_highlight);//设置图层高亮显示 if (marker.getLabel()) { marker.getLabel().show(); } }); //鼠标离开图层后的操作 marker.addEventListener("mouseout", function (e) { marker.setTop(false); //显示不同的颜色显示标签 //showType //复原图层的原始图标 if (showType == "1") { marker.setIcon(icon_red); } else if (showType == "2") { marker.setIcon(icon_green); } //隐藏图层标签内容 if (marker.getLabel()){ marker.getLabel().hide(); } }); } //显示信息窗口参数及显示函数 /** 信息窗口参数 */ var opts = { width : 220, // 信息窗口宽度 //height : 200, // 信息窗口高度 //title : "详细信息" , // 信息窗口标题 enableMessage : false// 设置允许信息窗发送短息 }; function openInfo(content, e) { var p = e.target; var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat); var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象 map.openInfoWindow(infoWindow, point); // 开启信息窗口 } var map = new BMap.Map("allmap", { minZoom: 9, maxZoom: 19 }); var point = new BMap.Point(116.128554, 24.294562); var top_left_navigation = new BMap.NavigationControl(); map.addControl(top_left_navigation);// 添加平移缩放控件 map.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT })); // 添加比例尺控件 map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件 map.enableScrollWheelZoom();//启用滚轮放大缩小 map.centerAndZoom(point, 9); var bmp_type = new BMap.MapTypeControl({ anchor: BMAP_ANCHOR_TOP_RIGHT }); map.addControl(bmp_type); //显示车辆轨迹线 //车辆轨迹坐标 var latLngArray = [ "113.408984,23.174023", "113.406639,23.174023", "113.403944,23.173566", "113.400827,23.17394", "113.397468,23.174496", "113.391494,23.174513", "113.389032,23.174588", "113.388736,23.173217", "113.388511,23.171888", "113.388592,23.170501", "113.38861,23.170219", "113.38861,23.168342", "113.388574,23.165218" ]; //中心点坐标 var carCenterPoint = new BMap.Point(113.408984, 23.174023); //轨迹显示样式 var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, { scale: 0.6,//图标缩放大小 strokeColor: '#fff',//设置矢量图标的线填充颜色 strokeWeight: '2',//设置线宽 }); var icons = new BMap.IconSequence(sy, '10', '30'); // 创建polyline对象 var pois = []; var carOpts = { position: carCenterPoint, // 指定文本标注所在的地理位置 offset: new BMap.Size(30, -30) //设置文本偏移量 } var carlabel = new BMap.Label("某车辆轨迹", carOpts); // 创建文本标注对象 carlabel.setStyle({ color: "red", fontSize: "12px", height: "20px", lineHeight: "20px", fontFamily: "微软雅黑" }); map.addOverlay(carlabel); map.centerAndZoom(carCenterPoint , 17); for(var i = 0; i < latLngArray.length ; i++) { var latLng = latLngArray[i]; var pointArray = latLng.split(","); pois.push(new BMap.Point(pointArray[0], pointArray[1])); } var polyline = new BMap.Polyline(pois, { enableEditing: false,//是否启用线编辑，默认为false enableClicking: true,//是否响应点击事件，默认为true icons: [icons], strokeWeight: '8',//折线的宽度，以像素为单位 strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1 strokeColor: "#18a45b" //折线颜色 }); map.addOverlay(polyline); //显示动画效果 //车辆轨迹动画图标 var icon_gps_car_run = new BMap.Icon('C:\\Users\\zgp2010\\Desktop\\icon_gpscar_run.png', new BMap.Size(32,32),{anchor: new BMap.Size(16, 16)}); // alert("将为您显示车辆轨迹动画效果。。。"); //var trackContent = realName +" : "+ startTimeStr + "至"+ endTimeStr; var trackContent = "某车辆轨迹回放"; // map.setViewport(pois); var lushu = new BMapLib.LuShu(map,pois,{ defaultContent: trackContent, autoView:false,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整 icon: icon_gps_car_run, speed: 100, enableRotation:true,//是否设置marker随着道路的走向进行旋转 }); lushu.start();车辆图片：https://img-blog.csdnimg.cn/9936f5bbd8e84291b5a6ab173bf3fc3c.png
|
https://lbsyun.baidu.com/index.php?title=jspopular/openlibraryBMapLibrary - Help
【本文地址】
今日新闻 |
推荐新闻 |