原文:【百度地图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. BZOJ 2431 HAOI2009 在列的数目的顺序相反 递归

    标题效果:乞讨1~n有都布置在物种的数目相反的顺序k计划数 订购f[i][j]对于前者i原子的反向排列的数j计划数 因此,我们将第一i插入的数1~i-1该装置 能生产0~i-1反向对 再就是 f[i] ...

  2. 【DataStructure】Some useful methods about linkedList(三)

    Method 4: Gets the value of element number i For example, if list is {22, 33, 44, 55, 66, 77, 88, 99 ...

  3. 【C语言探索之旅】 第二部分第一课：模块化编程

    内容简介 1.课程大纲 2.第二部分第一课: 模块化编程 3.第二部分第二课预告: 进击的指针,C语言王牌 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用C ...

  4. struts开发步骤

    说来惭愧.这是一个简单的struts折腾了很长一段时间,几乎相同的时间量就花了三天时间来解决.下面的步骤总结一下我开发:(我使用的是MyEclipse); 1.新建一个Exercise3的web Pr ...

  5. OpenGL学习日记-2015.3.13——多实例渲染

        实例化(instancing)或者多实例渲染(instancd rendering)是一种连续运行多条同样渲染命令的方法.而且每一个命令的所产生的渲染结果都会有轻微的差异. 是一种很有效的.有 ...

  6. 1002. 写这个号码 (20)（数学啊 ZJU_PAT）

    主题链接:http://pat.zju.edu.cn/contests/pat-b-practise/1002 读入一个自然数n,计算其各位数字之和.用汉语拼音写出和的每一位数字. 输入格式:每一个測 ...

  7. Socket方法LAN多线程文件传输

    1.思维:为了实现各种文件的大小可以被发送和接收的,它可以被设置为发送和接收缓冲器环.并记录文件的位置读取,假设读入缓冲区的字节的特定数目大于缓冲区的大小较小.然后该文件被发送,退出发送周期,关闭连接 ...

  8. iOS_20_微博的骨架结构

    最后效果图: BeyondViewController.m // // BeyondViewController.m // 20_帅哥no微博 // // Created by beyond on 1 ...

  9. 通过gradle运行测试脚本(转)

    练习一:HelloWorld 创建项目,源代码在src/main/java,测试源代码在src/test/java build.gradle的脚本: apply plugin: 'java' depe ...

  10. HTTP状态管理机制之Cookie（转）

    一.cookie 起源 cookie 最早是网景公司的雇员 Lou Montulli 在1993年3月发明,后被 W3C 采纳,目前 cookie 已经成为标准,所有的主流浏览器如 IE.Chrome ...