原文:【百度地图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. sql取整函数

    SQL取整运算2009年04一个月02日本 星期四 10:01有使用说明这种方法记录,就在今天,那么当仍然被遗忘.事实上通常用四舍五入的操作有几种情况,一个是简单的四舍五入,无论是小数点后面的是什么都 ...

  2. xml它解析----DOM解析

    DOM模型(documentobject model) •DOM解析器在解析XML文档时,会把文档中的全部元素,依照其出现的层次关系.解析成一个个Node对象(节点). •在dom中.节点之间关系例如 ...

  3. freemarker错误九

    1.错误叙述性说明 五月 30, 2014 11:52:04 下午 freemarker.log.JDK14LoggerFactory$JDK14Logger error 严重: Template p ...

  4. 【程序员小助手】Emacs，最强编辑器，没有之一

    内容简介 1.Emacs简介 2.Emacs三个平台的安装与配置 3.自动补全插件 4.小编的Emacs配置文件 5.常用快捷方式 6.和版本控制系统的配合(以SVN为例) [程序员小助手]系列 在这 ...

  5. [原创].NET 分布式架构开发实战之一 故事起源

    原文:[原创].NET 分布式架构开发实战之一 故事起源 .NET 分布式架构开发实战之一 故事起源 前言:本系列文章主要讲述一个实实在在的项目开发的过程,主要包含:提出问题,解决问题,架构设计和各个 ...

  6. FZU1669 Right-angled Triangle【毕达哥拉斯三元组】

    主题链接: pid=1669">http://acm.fzu.edu.cn/problem.php?pid=1669 题目大意: 求满足以a.b为直角边,c为斜边,而且满足a + b ...

  7. RH133读书笔记(8)-Lab 8 Manage Network Settings

    Lab 8 Manage Network Settings Goal: To build skills needed to manually configure networking Estimate ...

  8. HDFS Safemode问题

    处于safemode的集群是无法接收不论什么写操作的,包含创建文件夹.删除文件.改动文件.上传文件等等. 关于safemode,在http://www.iteblog.com/archives/977 ...

  9. Android使用开发WebView战斗技能

    转载请注明出处:http://blog.csdn.net/allen315410/article/details/44619181 前段时间做项目的时候.在项目中用了WebView组件,遇到了一些问题 ...

  10. OpenNMS在安装”我找不到jrrd.dll“错误的解决方法

    在Windows 2003 Server(虚拟机)安装OpenNMS.找不到jrrd.dll错误.尝试从学习OpenNMS官网下载jrrd-1.0.7.tar.gz,我们没有发现标dll文件,编译需要 ...