百度地图api轨迹回放资源-CSDN下载

共2个文件

png：1个

html：1个

百度地图api

轨迹回放

javascript

5星 · 超过95%的资源需积分: 45 89 浏览量 2013-05-22 17:00:56 上传评论 10 收藏 5KB ZIP 举报

在本文中，我们将深入探讨如何使用百度地图API实现轨迹回放功能。百度地图API是一个强大的工具，它允许开发者集成地图功能到网页应用中，包括显示地图、定位、路径规划等。在JavaScript环境下，我们可以利用其JavaScript API来创建交互式地图，并实现轨迹回放这一特色功能。轨迹回放的核心在于获取轨迹坐标数据。这些数据通常是以数组的形式存储，每个元素代表一个地理坐标点（经度和纬度）。例如： ```javascript var轨迹坐标 = [ {lng: 116.404, lat: 39.915}, {lng: 116.405, lat: 39.916}, // 更多坐标点... ]; ``` 接着，我们需要在地图上绘制这些坐标点。百度地图API提供了`BMap.Marker`类用于创建标记，`BMap.Polyline`类用于绘制折线。我们遍历坐标数组，依次创建标记和折线： ```javascript var marker, polyline; for (var i = 0; i < 轨迹坐标.length; i++) { marker = new BMap.Marker(轨迹坐标[i]); // 添加标记到地图地图对象.addOverlay(marker); if (!polyline) { polyline = new BMap.Polyline([]); // 添加折线到地图地图对象.addOverlay(polyline); } // 将当前坐标添加到折线 polyline.getPaths().push([轨迹坐标[i].lng, 轨迹坐标[i].lat]); } ``` 为了让轨迹动态回放，我们需要使用`setTimeout`函数实现定时更新。每次更新时，移动折线的第一个点到末尾，然后删除第一个点，模拟轨迹的移动效果。同时，为了平滑回放，可以设置一定的速度延迟，如： ```javascript var index = 0; var moveInterval = setInterval(function() { if (index >= 轨迹坐标.length) { clearInterval(moveInterval); return; } var oldPoint = polyline.getPaths()[0]; polyline.getPaths().push(oldPoint); polyline.getPaths().shift(); // 更新地图中心点，确保轨迹可见地图对象.setCenter(oldPoint); index++; }, 1000); // 延迟时间1000毫秒，可根据实际需求调整 ``` 此外，还可以增加控制按钮，让用户自行控制播放、暂停、快进等操作。这需要用到`BMap.Control`类创建自定义控件，并绑定相应的事件处理函数。总结来说，实现百度地图API的轨迹回放功能主要包括以下几个步骤： 1. 获取并存储轨迹坐标数据。 2. 使用`BMap.Marker`和`BMap.Polyline`在地图上绘制轨迹。 3. 使用`setTimeout`定时更新，模拟轨迹回放。 4. 可选：添加用户控制功能，提升用户体验。通过以上步骤，我们可以在网页中创建一个交互式的轨迹回放功能，使用户能够直观地查看和理解地理轨迹信息。记得在实际开发中，根据项目需求对代码进行适当的调整和优化，确保性能和用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

baidu_map_api_test.zip （2个子文件）

mapapi

track.html 4KB

car.png 3KB

<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Track</title> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #controller{width:100%; border-bottom:3px outset; height:30px; filter:alpha(Opacity=100); -moz-opacity:1; opacity:1; z-index:10000; background-color:lightblue;} #container{height:100%} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=D2b4558ebed15e52558c6a766c35ee73"></script> <script type="text/javascript"> //获取所有点的坐标 var points = [ new BMap.Point(114.00100, 22.550000), new BMap.Point(114.00130, 22.550000), new BMap.Point(114.00160, 22.550000), new BMap.Point(114.00200, 22.550000), new BMap.Point(114.00300, 22.550500), new BMap.Point(114.00400, 22.550000), new BMap.Point(114.00500, 22.550000), new BMap.Point(114.00505, 22.549800), new BMap.Point(114.00510, 22.550000), new BMap.Point(114.00515, 22.550000), new BMap.Point(114.00525, 22.550400), new BMap.Point(114.00537, 22.549500) ]; var map; //百度地图对象 var car; //汽车图标 var label; //信息标签 var centerPoint; var timer; //定时器 var index = 0; //记录播放到第几个point var followChk, playBtn, pauseBtn, resetBtn; //几个控制按钮 function init() { followChk = document.getElementById("follow"); playBtn = document.getElementById("play"); pauseBtn = document.getElementById("pause"); resetBtn = document.getElementById("reset"); //初始化地图,选取第一个点为起始点 map = new BMap.Map("container"); map.centerAndZoom(points[0], 15); map.enableScrollWheelZoom(); map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.ScaleControl()); map.addControl(new BMap.OverviewMapControl({isOpen: true})); //通过DrivingRoute获取一条路线的point var driving = new BMap.DrivingRoute(map); driving.search(new BMap.Point(114.00100, 22.550000), new BMap.Point(113.95100, 22.550000)); driving.setSearchCompleteCallback(function() { //得到路线上的所有point points = driving.getResults().getPlan(0).getRoute(0).getPath(); //画面移动到起点和终点的中间 centerPoint = new BMap.Point((points[0].lng + points[points.length - 1].lng) / 2, (points[0].lat + points[points.length - 1].lat) / 2); map.panTo(centerPoint); //连接所有点 map.addOverlay(new BMap.Polyline(points, {strokeColor: "black", strokeWeight: 5, strokeOpacity: 1})); //显示小车子 label = new BMap.Label("", {offset: new BMap.Size(-20, -20)}); car = new BMap.Marker(points[0], {icon: new BMap.Icon("car.png", new BMap.Size(48, 48), {imageOffset: new BMap.Size(0, 0)})}); car.setLabel(label); map.addOverlay(car); //点亮操作按钮 playBtn.disabled = false; resetBtn.disabled = false; }); } function play() { playBtn.disabled = true; pauseBtn.disabled = false; var point = points[index]; if(index > 0) { map.addOverlay(new BMap.Polyline([points[index - 1], point], {strokeColor: "red", strokeWeight: 1, strokeOpacity: 1})); } label.setContent("经度: " + point.lng + "<br>纬度: " + point.lat); car.setPosition(point); index++; if(followChk.checked) { map.panTo(point); } if(index < points.length) { timer = window.setTimeout("play(" + index + ")", 200); } else { playBtn.disabled = true; pauseBtn.disabled = true; map.panTo(point); } } function pause() { playBtn.disabled = false; pauseBtn.disabled = true; if(timer) { window.clearTimeout(timer); } } function reset() { followChk.checked = false; playBtn.disabled = false; pauseBtn.disabled = true; if(timer) { window.clearTimeout(timer); } index = 0; car.setPosition(points[0]); map.panTo(centerPoint); } </script> </head> <body onload="init();"> <div id="controller" align="center"> <input id="follow" type="checkbox"><span style="font-size:12px;">画面跟随</span></input> <input id="play" type="button" value="播放" onclick="play();" disabled /> <input id="pause" type="button" value="暂停" onclick="pause();" disabled /> <input id="reset" type="button" value="重置" onclick="reset()" disabled /> </div> <div id="container"></div> </body> </html>

评论收藏

内容反馈