百度地图API 绘制轨迹历史

 <!DOCTYPE html>

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

     <style type="text/css">

         body, html {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}

         #allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}

     </style>

     <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=8PBGIzcngFtMIdnWIX9ZrBr2ZjWN0ejT"></script>

     <title>车辆运行轨迹测试</title>

     </head>

 <body>

 <input id="allmap_value" value="" style="display:none;">

 <div id="allmap"></div>

 </body>

 </html>

 <script type="text/javascript">

 $(function(){

 //初始化

 drawGreenAddress(0,"red",4);

 //show_mycat($("#allmap_value").val(),list[index].Long,list[index].Lat);

 })

     var timer;     //定时器

     var index = 0; //记录播放到第几个point

     var list = [

     {Long:106.652024,Lat:26.617221},

     {Long:106.652886,Lat:26.614185},

     {Long:106.652527,Lat:26.614314},

     {Long:106.652743,Lat:26.609469},

     {Long:106.654324,Lat:26.607531},

     {Long:106.65612,Lat:26.602556},

 ];

     var listLast = list.length-1;

     // 百度地图API功能

     var map = new BMap.Map("allmap");    // 创建Map实例

     map.addControl(new BMap.NavigationControl());

     map.addControl(new BMap.ScaleControl());

     map.addControl(new BMap.OverviewMapControl({isOpen: true}));

     map.centerAndZoom(new BMap.Point(list[0].Long,list[0].Lat), 15);  // 初始化地图,设置中心点坐标和地图级别

     map.addControl(new BMap.MapTypeControl());   //添加地图类型控件

     map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

     setTimeout(drawIcon,500);

     var carMk;

     var myBeginIcon = new BMap.Icon("http://e.hiphotos.baidu.com/image/pic/item/7e3e6709c93d70cfaf72bca2f0dcd100bba12b90.jpg", new BMap.Size(25,37), {imageOffset: new BMap.Size(0, 0)});//人

     var myEndIcon = new BMap.Icon("http://b.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f534c096ae8fe9925bd317dc0.jpg", new BMap.Size(25,37), {imageOffset: new BMap.Size(0, 0)});//人

     //show_mycat("这里是地址",106.652024,26.617221);

     //展示bd地址

     var car = "";

     function show_mycat(address,long,lat){

         if(car) map.removeOverlay(car)

         label = new BMap.Label(address, {offset: new BMap.Size(-20, -20)});

         car = new BMap.Marker(new BMap.Point(long,lat));

         car.setLabel(label);

         map.addOverlay(car);

         map.panTo(new BMap.Point(long, lat));

     }    

     //显示原始路线

     function drawGreenLine(i,color,weitht){

         var polyline = new BMap.Polyline([

             new BMap.Point(list[i].Long,list[i].Lat),//起始点的经纬度

             new BMap.Point(list[i+1].Long,list[i+1].Lat)//终点的经纬度

         ], {strokeColor:color,//设置颜色

             strokeWeight:weitht, //宽度

             strokeOpacity:1});//透明度

         map.addOverlay(polyline);

     }

     //获取路线

      function drawGreenAddress(i,color,weitht){

         if(i%2==0){ //不能太频繁请求百度地址,这里可能会改大

             var geoc = new BMap.Geocoder();

             geoc.getLocation(new BMap.Point(list[i].Long,list[i].Lat),function(rs){

             var addComp = rs.addressComponents;

             address =  addComp.province + addComp.city  + addComp.district + addComp.street  + addComp.streetNumber;

             $("#allmap_value").val(address)

             });

         }

     }

     function lineAddress(i,color,weitht){

         drawGreenLine(i,color,weitht)

         drawGreenAddress(i,color,weitht)

     }

     function drawIcon(){

         if(carMk){

             map.removeOverlay(carMk);

         }

         carMk2 = new BMap.Marker(

                 new BMap.Point(list[0].Long,list[0].Lat),//起始点的经纬度

                 {icon:myBeginIcon});

         map.addOverlay(carMk2);

         carMk = new BMap.Marker(

                 new BMap.Point(list[listLast].Long,list[listLast].Lat),//终点的经纬度

                 {icon:myEndIcon});

         map.addOverlay(carMk);

         for(var i=0;i<list.length-1;i++){

             drawGreenLine(i,"green",4);

         }

     }

     //停止

 function stop() {

     if(timer) {

         window.clearTimeout(timer);

     }

 }

 //运行地图轨迹

     function play(){

      if(index < listLast){

         lineAddress(index,"red",2);

         //显示地址

         show_mycat($("#allmap_value").val(),list[index+1].Long,list[index+1].Lat);

         timer  = window.setTimeout("play(" + index + ",'red',2)", 500);

         index++;

      }

     }

 </script>

效果图

执行play() 方法可根据经纬度跑地图

百度地图API 绘制轨迹历史的更多相关文章

百度地图api描绘车辆历史轨迹图
最近公司在做项目需需求:车辆定位后在地图显示历史轨迹的功能一开始使用了google的地图api,但是发现会一直关闭,索性支持下国产,使用了百度地图api search方法把两个点连接成线后,会出现起 ...
使用百度地图API实现轨迹回放
调用百度地图API实现路线的轨迹回放功能其实很简单,只要搞懂以下几点即可: 1.需要用Polyline方法先绘制好路线图 2.用Marker添加标注点 3.关键一步,通过结合定时器,使用Marker创 ...
百度地图API绘制带头箭头的折线
源代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" co ...
百度地图API二：根据标注点坐标范围计算显示缩放级别zoom自适应显示地图
原文:百度地图API二:根据标注点坐标范围计算显示缩放级别zoom自适应显示地图版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/liusaint1992/ ...
百度地图API，根据经纬度实现车辆移动轨迹绘制
百度地图,实现车辆轨迹绘制实现思路: 1.根据经纬度实现车辆轨迹绘制 2.使用百度地图API的两个覆盖物实现,Polyline(折线)绘制轨迹,Marker(图标)绘制小车图标 3.将每两个坐标间连 ...
记录开发基于百度地图API实现在地图上绘制轨迹并拾取轨迹对应经纬度的工具说明
前言: 最近一直在做数据可视化方面的工作,其中平面可视化没什么难度,毕竟已经有很多成熟的可供使用的框架,比如百度的echart.js,highcharts.js等.还有就是3D可视化了,整体来说难度也 ...
【百度地图API】北京周边7日游——图标按路线轨迹行动
原文:[百度地图API]北京周边7日游--图标按路线轨迹行动任务描述: 春节就要来啦~酸奶小妹的妈妈要从遥远的重庆,来到北京过春节呢!酸奶小妹忙着给妈妈计划,北京周边的旅游线路.计划好路线后,就开始 ...
web端百度地图API实现实时轨迹动态展现
最近在工作中遇到了一个百度地图api中的难题,恐怕有的程序员可能也遇到过.就是实时定位并显示轨迹,网上大部分都是通过创建polyline对象贴到地图上.当然,百度地图的画线就是这样实现的,但是好多人会 ...
百度地图api简单使用方法
百度地图API的使用方法百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html&g ...

随机推荐

JSON自定义排序
var json=[{ Name:'张三', Addr:'重庆', Age:'20' },{ Name:'张三3', Addr:'重庆2', Age:'25' },{ Name:'张三2', Addr ...
递归C++
递归C++ 一.递归简介自己调用自己二.递归写法 2.1 写法介绍先写出问题的递推公式递归部分的边界条件就是递推公式中的边界条件递归部分的主体部分就是递推公式中的主体部分 2.2 实例 (1 ...
增加centos7.3上安装php7的php-soap扩展
代码传到正式服务器上去就:Class 'SoapClient' not found,只能是soap扩展没装! 因为服务器上面的PHP是7.1.11的,所以soap也要装7.1.11的,否则会冲突 ...
Silverlight自定义控件系列 – TreeView (1)
原文路径:http://blog.csdn.net/wlanye/article/details/7265457 很多人都对MS自带的控件不太满意(虽然MS走的是简约风格),都会试图去修改或创建让 ...
EFS 你应该知道的事
需要备份或者还保留这个路径 %USERPROFILE%\AppData\Roaming\Microsoft\Crypto\RSA certmgr.msc 个人证书导出你开始使用EFS加密后的证书 ci ...
GetContent
Sub GetContent(ByVal URL As String, ByVal SheetName As String) Dim strText As String Dim i As Long D ...
Android 7.0真实上手体验
Android 7.0真实上手体验 Android 7.0的首个开发者预览版发布了,支持的设备只有Nexus6.Nexus 5X.Nexus 6P.Nexus 9.Nexus Player.Pixel ...
LICEcap 和 FS Capture入门教程
上一篇介绍了如何使用 Visio 图形图表工具,文中贴了一张gif图,留言的小伙伴们迫不及待想知道如何录制 GIF 图,强哥姑且卖弄一次,把 PC 端截图工具和教程分享给大家,分别为 LICEcap ...
python-day49--前端 css-层叠样式表
1.css功能: 对html标签的渲染和布局 2.CSS 要掌握的两方面: 1.查找标签选择器 2.操作标签 (对属性进行操作) 3.CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一 ...
python-day43--单表查询之关键字执行优先级（重点）
一.关键字的执行优先级(重点) 1.关键字执行优先级 from where #约束条件(在数据产生之前执行) group by #分组没有分组则默认一组按照select后的字段取得一张新的虚拟表, ...

百度地图API 绘制轨迹历史

百度地图API 绘制轨迹历史的更多相关文章

随机推荐

热门专题