原文:【百度地图API】如何利用地图API制作汽车沿道路行驶的动画？——如何获得道路层数据

有几个做汽车导航的朋友问我说，他们想在地图上制作一辆车沿着道路行驶的动画。可是，百度地图的道路数据并没有公开。所以，应该怎么办呢？

一、

我们先来学习如何把百度地图“弄”出来。把下面这段代码保存为htm格式，用浏览器打开，就能看到百度地图了。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>点沿直线运动</title><script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2&services=true"></script></head><body><div style="width:520px;height:340px;border:1px solid gray" id="container"></div></body></html><script type="text/javascript">var map = new BMap.Map("container"); //创建地图容器map.centerAndZoom(new BMap.Point(116.404, 39.915), 15); //设置中心点和地图级别</script>

二、

再分析一下汽车导航制作者的这个需求：

1、车辆——用自定义图片的marker实现

var carMk = new BMap.Marker(pts[],{icon:myIcon});var myIcon = new BMap.Icon("Mario.png", new BMap.Size(, ), { //小车图片 //offset: new BMap.Size(0, -5), //相当于CSS精灵 imageOffset: new BMap.Size(, ) //图片的偏移量。为了是图片底部中心对准坐标点。 });

2、获取道路数据——虽然百度地图API并未公开道路层数据，但我们可以巧妙的“拿到”。具体请往下看。

三、

如何利用百度地图API拿到道路层的数据呢？

答案很简单：驾车导航。

首先讨论一下，为什么要用驾车导航，而不用步行和公交导航？

1、步行导航：步行导航显然能“穿越”公园、甚至小区，得到的肯定不是道路层的数据；

2、公交导航：公交导航虽然都是道路层的数据，但很局限，因为只有有公交车的地方，才有公交方案。并且，公交方法是包含了地铁线路的。

3、驾车导航：拥有所有道路层的数据，并且没有地铁、小区里、花园内这样的无效数据。

驾车导航示例：

var myP1 = new BMap.Point(116.380967,39.913285); //起点var myP2 = new BMap.Point(116.424374,39.914668); //终点var driving2 = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}}); //驾车实例driving2.search(myP1, myP2); //显示一条公交线路

四、

那么，如何获得道路层的数据呢？

我们可以想象一下，驾车导航的路线，在API中是属于折线。

折线是由无数的点构成的。

也就是说，只要找到这些点，我们就能获取道路层的数据了。

我们发现，Route里有个接口getPath，可以获得路线的地理坐标点数组。并且，以point数组的形式返回。

Route类参考：http://dev.baidu.com/wiki/map/index.php?title=Class:%E6%9C%8D%E5%8A%A1%E7%B1%BB/Route

利用创建好的驾车实例DrivingRoute，先search，得到一个驾车方案；

驾车方案中，选择第一条Route；

最后获得该Route的全部点。

注意，由于ajax的异步加载机制，我们需要利用搜索后的回调函数setSearchCompleteCallback，来进行道路数据的获得。

driving.setSearchCompleteCallback(function(){ var pts = driving.getResults().getPlan().getRoute().getPath(); //通过驾车实例，获得一系列点的数组 var paths = pts.length; //获得有几个点}

五、

道路数据获取完毕。接下来是汽车图片的展示。可以通过改变marker的坐标点来实现，改变marker坐标的接口setPosition。

我们假设每100毫秒改变一次，利用延时函数setTimeout。

同样，由于ajax异步加载原因，需要异步给i赋值。

i=; function resetMkPoint(i){ carMk.setPosition(pts[i]); if(i < paths){ setTimeout(function(){ i++; resetMkPoint(i); },); } } setTimeout(function(){ resetMkPoint(); console.log(i); },)

六、

接下来，可以点击这里，运行示例。

点击左侧的“开始”按钮，动画开始播放。

点击下侧的“获取代码”按钮，可得到全部源代码。

七、

最后，放出全部源代码：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>点沿直线运动</title><script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2&services=true"></script></head><body><div style="width:520px;height:340px;border:1px solid gray" id="container"></div><input type="button" value="开始" onclick="run();" /></body></html><script type="text/javascript">var map = new BMap.Map("container");map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);var myP1 = new BMap.Point(116.380967,39.913285); //起点var myP2 = new BMap.Point(116.424374,39.914668); //终点var myIcon = new BMap.Icon("Mario.png", new BMap.Size(32, 70), { //小车图片 //offset: new BMap.Size(0, -5), //相当于CSS精灵 imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。 });var driving2 = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}}); //驾车实例driving2.search(myP1, myP2); //显示一条公交线路function run(){ var driving = new BMap.DrivingRoute(map); //驾车实例 driving.search(myP1, myP2); driving.setSearchCompleteCallback(function(){ var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通过驾车实例，获得一系列点的数组 var paths = pts.length; //获得有几个点 var carMk = new BMap.Marker(pts[0],{icon:myIcon}); map.addOverlay(carMk); i=0; function resetMkPoint(i){ carMk.setPosition(pts[i]); if(i < paths){ setTimeout(function(){ i++; resetMkPoint(i); },100); } } setTimeout(function(){ resetMkPoint(5); console.log(i); },100) });}</script>

【百度地图API】如何利用地图API制作汽车沿道路行驶的动画？——如何获得道路层数据的更多相关文章

  1. Arcgis api for javascript学习笔记(3.2版本) - 匀速行驶轨迹动画效果

    一.前言 有这样一个需求:已知某条线上的n个点的经纬度数组 ,实现物体运行轨迹. 如果这些点中两个距离很近,那么我们可以用一个定时器在地图上每次重新画一个点,这样肉眼看到这个点上的运动效果,如下图代码 ...

  2. 百度地图API：利用瓦片生成工具，自定义背景图片

    参考酸奶小妹的博文<[百度地图API]如何制作一张魔兽地图!!——CS地图也可以,哈哈哈> (http://www.cnblogs.com/milkmap/archive/2011/05/ ...

  3. 【百度地图API】——如何用label制作简易的房产标签

    原文:[百度地图API]--如何用label制作简易的房产标签 摘要: 最近,API爱好者们纷纷说,自定义marker太复杂了!不仅定义复杂,连所有的dom事件都要自己重新定义.有没有快速简易创建房产 ...

  4. 【百度地图API】如何制作一张魔兽地图！！——CS地图也可以，哈哈哈

    原文:[百度地图API]如何制作一张魔兽地图!!--CS地图也可以,哈哈哈 摘要: 你玩魔兽不?你知道如何做一张魔兽地图不?! 快来看此文吧! ---------------------------- ...

  5. 百度地图API和高德地图API资料集锦

    [高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行   [高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自 ...

  6. 【百度地图API】如何快速创建带有标注的地图？——快速创建地图工具+如何标注商家

    原文:[百度地图API]如何快速创建带有标注的地图?--快速创建地图工具+如何标注商家 摘要: 如果你不会程序,如果你不想写代码. 如果你想拥有一张自己的地图,如果你想在该地图上标注出你商店的位置. ...

  7. 记录开发基于百度地图API实现在地图上绘制轨迹并拾取轨迹对应经纬度的工具说明

    前言: 最近一直在做数据可视化方面的工作,其中平面可视化没什么难度,毕竟已经有很多成熟的可供使用的框架,比如百度的echart.js,highcharts.js等.还有就是3D可视化了,整体来说难度也 ...

  8. 如何在网中使用百度地图API自定义个性化地图

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  9. 百度地图API，展示地图和添加控件

    1.申请百度账号和AK 点我申请 2.准备页面 根据HTML标准,每一份HTML文档都应该声明正确的文档类型,我们建议您使用最新的符合HTML5规范的文档声明: <!DOCTYPE html&g ...

随机推荐

  1. hibernate它 10.many2many单向

    在前文hibernate之5.many2one单向提到多对多关系,表结构设计是基于中间表来实现, 以下以用户与角色(多对多)为例,在Hibernate是怎样操作的 表结构设计: 类图: CRUD; S ...

  2. gerrit git使用

    有关git的參考资料 pro git中文版, 最好的git书籍 http://git-scm.com/book/zh 图解git http://marklodato.github.com/visual ...

  3. 开源Math.NET基础数学类库使用(02)矩阵向量计算

    原文:[原创]开源Math.NET基础数学类库使用(02)矩阵向量计算 开源Math.NET基础数学类库使用系列文章总目录:   1.开源.NET基础数学计算组件Math.NET(一)综合介绍    ...

  4. [精华]Hadoop,HBase分布式集群和solr环境搭建

    1. 机器准备(这里做測试用,目的准备5台CentOS的linux系统) 1.1 准备了2台机器,安装win7系统(64位) 两台windows物理主机: 192.168.131.44 adminis ...

  5. 作为一个新人，如何学习嵌入式Linux？

    作为一个新人.如何学习嵌入式Linux?我一直在问太多次,特写文章来回答这个问题. 在学习嵌入式Linux之前.肯定要有C语言基础.汇编基础有没有无所谓(就那么几条汇编指令,用到了一看就会).C语言要 ...

  6. Oracle批量执行脚本文件

    以下是Oracle批量执行脚本文件的步骤和方法 1.创建脚本文件(xx.sql): 例如文件CreateTable Create table tb1( id varchar2(30), Name va ...

  7. Mysql 5.6 新特性

    随笔,真的随笔,以后理解得更深了再修改.   Index Condition Pushdown 更多的让存储引擎去处理Where语句中的条款,避免返回无关字段数据等:   Multi-Range Re ...

  8. mumu血压计母亲节“拼团”盛大开幕，百度和厂家创造一个双赢的局面

        在BAT的互联网时代.似乎不论什么新兴产品和服务都不能脱离BAT的支持,作为中国互联网体量最庞大的三家企业.BAT代表的是资源优势.用户优势.品牌优势.因此,一旦脱离BAT的支持,想迅速做大无 ...

  9. mysql数据文件迁移到新的硬盘分区的方法

    该系统增加了一个硬盘.要创建新的分区/data文件夹,mysql对于数据文件夹/var/lib/mysql 1.  停止mysql维修 [root@localhost~]# service mysql ...

  10. 如何获得SQL Server索引使用情况

    原文:如何获得SQL Server索引使用情况 原文出自: http://www.mssqltips.com/sqlservertip/1239/how-to-get-index-usage-info ...