思享工具箱

使用百度地图API实现轨迹回放

摘要：
调用百度地图API来实现路线的轨迹回放功能其实很简单，只要你了解以下几点：1.你需要先使用Polyline方法来绘制路线图。2.使用标记添加注释点。3.关键一步是使用Marker创建的注释点实例的setPosition，结合计时器改变注释点的位置，从而实现回放功能的代码共享。您可以使用[html]viewplaincopy˂！

调用百度地图API实现路线的轨迹回放功能其实很简单，只要搞懂以下几点即可：

1.需要用Polyline方法先绘制好路线图

2.用Marker添加标注点

3.关键一步，通过结合定时器，使用Marker创建的标注点实例的setPosition改变标注点位置，实现播放功能

代码分享，直接复制即可使用

[html] view plaincopy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6. <title>Track</title>  
  7. <style type="text/css">  
  8.     html{height:100%}  
  9.     body{height:100%;margin:0px;padding:0px}  
  10.     #controller{100%; border-bottom:3px outset; height:30px; filter:alpha(Opacity=100); -moz-opacity:1; opacity:1; z-index:10000; background-color:lightblue;}  
  11.     #container{height:100%}  
  12. </style>    
  13. <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=D2b4558ebed15e52558c6a766c35ee73"></script>  
  14. <script type="text/javascript">  
  15. //获取所有点的坐标  
  16. var points = [  
  17.     new BMap.Point(114.00100, 22.550000), new BMap.Point(114.00130, 22.550000),  
  18.     new BMap.Point(114.00160, 22.550000), new BMap.Point(114.00200, 22.550000),  
  19.     new BMap.Point(114.00300, 22.550500), new BMap.Point(114.00400, 22.550000),  
  20.     new BMap.Point(114.00500, 22.550000), new BMap.Point(114.00505, 22.549800),  
  21.     new BMap.Point(114.00510, 22.550000), new BMap.Point(114.00515, 22.550000),  
  22.     new BMap.Point(114.00525, 22.550400), new BMap.Point(114.00537, 22.549500)  
  23. ];  
  24.   
  25. var map;   //百度地图对象  
  26. var car;   //汽车图标  
  27. var label; //信息标签  
  28. var centerPoint;  
  29.   
  30. var timer;     //定时器  
  31. var index = 0; //记录播放到第几个point  
  32.   
  33. var followChk, playBtn, pauseBtn, resetBtn; //几个控制按钮  
  34.   
  35. function init() {  
  36.     followChk = document.getElementById("follow");  
  37.     playBtn = document.getElementById("play");  
  38.     pauseBtn = document.getElementById("pause");  
  39.     resetBtn = document.getElementById("reset");  
  40.   
  41.     //初始化地图,选取第一个点为起始点  
  42.     map = new BMap.Map("container");  
  43.     map.centerAndZoom(points[0], 15);  
  44.     map.enableScrollWheelZoom();  
  45.     map.addControl(new BMap.NavigationControl());  
  46.     map.addControl(new BMap.ScaleControl());  
  47.     map.addControl(new BMap.OverviewMapControl({isOpen: true}));  
  48.       
  49.     //通过DrivingRoute获取一条路线的point  
  50.     var driving = new BMap.DrivingRoute(map);  
  51.     driving.search(new BMap.Point(114.00100, 22.550000), new BMap.Point(113.95100, 22.550000));  
  52.     driving.setSearchCompleteCallback(function() {  
  53.         //得到路线上的所有point  
  54.         points = driving.getResults().getPlan(0).getRoute(0).getPath();  
  55.         //画面移动到起点和终点的中间  
  56.         centerPoint = new BMap.Point((points[0].lng + points[points.length - 1].lng) / 2, (points[0].lat + points[points.length - 1].lat) / 2);  
  57.         map.panTo(centerPoint);  
  58.         //连接所有点  
  59.         map.addOverlay(new BMap.Polyline(points, {strokeColor: "black", strokeWeight: 5, strokeOpacity: 1}));  
  60.           
  61.         //显示小车子  
  62.         label = new BMap.Label("", {offset: new BMap.Size(-20, -20)});  
  63.         car = new BMap.Marker(points[0]);  
  64.         car.setLabel(label);  
  65.         map.addOverlay(car);  
  66.           
  67.         //点亮操作按钮  
  68.         playBtn.disabled = false;  
  69.         resetBtn.disabled = false;  
  70.     });  
  71. }  
  72.   
  73. function play() {  
  74.     playBtn.disabled = true;  
  75.     pauseBtn.disabled = false;  
  76.       
  77.     var point = points[index];  
  78.     if(index > 0) {  
  79.         map.addOverlay(new BMap.Polyline([points[index - 1], point], {strokeColor: "red", strokeWeight: 1, strokeOpacity: 1}));  
  80.     }  
  81.     label.setContent("经度: " + point.lng + "<br>纬度: " + point.lat);  
  82.     car.setPosition(point);  
  83.     index++;  
  84.     if(followChk.checked) {  
  85.         map.panTo(point);  
  86.     }  
  87.     if(index < points.length) {  
  88.         timer = window.setTimeout("play(" + index + ")", 200);  
  89.     } else {  
  90.         playBtn.disabled = true;  
  91.         pauseBtn.disabled = true;  
  92.         map.panTo(point);  
  93.     }  
  94. }  
  95.   
  96. function pause() {  
  97.     playBtn.disabled = false;  
  98.     pauseBtn.disabled = true;  
  99.       
  100.     if(timer) {  
  101.         window.clearTimeout(timer);  
  102.     }  
  103. }  
  104.   
  105. function reset() {  
  106.     followChk.checked = false;  
  107.     playBtn.disabled = false;  
  108.     pauseBtn.disabled = true;  
  109.       
  110.     if(timer) {  
  111.         window.clearTimeout(timer);  
  112.     }  
  113.     index = 0;  
  114.     car.setPosition(points[0]);  
  115.     map.panTo(centerPoint);  
  116. }  
  117. </script>  
  118. </head>    
  119.      
  120. <body onload="init();">    
  121.     <div id="controller" align="center">  
  122.         <input id="follow" type="checkbox"><span style="font-size:12px;">画面跟随</span></input>  
  123.         <input id="play" type="button" value="播放" onclick="play();" disabled />  
  124.         <input id="pause" type="button" value="暂停" onclick="pause();" disabled />  
  125.         <input id="reset" type="button" value="重置" onclick="reset()" disabled />  
  126.     </div>  
  127.     <div id="container"></div>  
  128. </body>    
  129. </html>  

标签：#地图api | 浏览：612 | 发布日期：

免责声明：文章转载自《使用百度地图API实现轨迹回放》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇微信H5适配 解决微信调整字体大小导致Html5页面混乱vue-打包为webapp，如何解决应用内跳转外部链接返回导致退出应用下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

百度地图开发-实现离线地图功能 05

上一篇我们根据研究学习，实现了实时定位显示功能，可以在地图上显示出自己所处的位置，并实时进行自动更新。那么接下来就让我们实现离线地图功能。 在日常的业务开发过程中，很多时候都会使用离线地图。那么我们需要在有网的时候加载并下载所处地区的地图，当没有运营商网络或WIFI的时候，就可以无感切换到离线地图，不会过大影响用户的使用。 实现离线地图功能 关于离线地图，...

百度地图api通过地址显示地图，白名单

百度地图api通过地址显示地图，白名单 http://developer.baidu.com/map/jsdemo.htm#i7_1?qq-pf-to=pcqq.c2c------------------------------------【百度地图API】如何进行地址解析与反地址解析？——模糊地址能搜索到精确地理信息！ - 酸奶小妹 - 博客园http:...

高德地图的标记使用

<template> 　　<ui-container v-loading="sysLoading" :element-loading-text="syncLoadingText"> 　　　　<ui-main> 　　　　　　<div class="row-wrap"> 　　　　　　　　<ui-row :g...

Vue --》 如何在vue中调用百度地图

1.项目根目录下下载百度地图插件 npm install vue-baidu-map –save 2.在首页index.html中引入百度地图: <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=秘钥"></script> 我...

百度地图JavaScript开发入门先知

最近项目紧急开发了一些百度地图的功能，觉得百度地图实数强大！于是今天不忙总结一下，看到不错的文章先转载。 文章出处：https://www.opengps.cn/Blog/View.aspx?id=14 百度地图JavaScript开发第一步，得会看资料。很多新手，是因为连基本的页面怎么打开都不知道，重度依赖搜索引擎去搜出来百度地图开发官方站点，从而记不住...

百度地图JavaScript API获取用户当前经纬度和详细地理位置，反之通过详细地理位置获取当前经纬度

本文并非原创，原创地址为：https://www.cnblogs.com/Can-daydayup/p/10941470.html 前言： 　　前段时间刚好使用了百度地图的js api定位获取用户当前经纬度并获取当前详细位置和通过当前用户详细地理位置换取用户当前经纬度坐标的功能，为了方便下次找起来方便一些自己在这里记录一下，希望也能够帮助到有需要的童鞋们！...

最新文章

随机推荐

思享工具箱导航