原文:【百度地图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. WTL安装

    1.在AppWiz文件夹下有多个JScript文件,依据自己的编辑器选择对应的文件执行. 假设双击无法执行的话,则执行wscript //e:jscript (文件路径) 如wscript //e:j ...

  2. c++ stl algorithm: std::find, std::find_if

    std::find: 查找容器元素, find仅仅能查找容器元素为<基本数据类型> [cpp] view plaincopy #include <iostream> #incl ...

  3. Orleans：NET的Actor模型

    .NET的Actor模型:Orleans   Orleans是微软推出的类似Scala Akka的Actor模型,Orleans是一个建立在.NET之上的,设计的目标是为了方便程序员开发需要大规模扩展 ...

  4. iOS开发：多线程技术概述

    一.概述 线程(thread):用于指代独立执行的代码段. 进程(process):用于指代一个正在运行的可执行程序,它可以包含多个线程. 任务(task):用于指代抽象的概念,表示需要执行工作. 多 ...

  5. Unity 二战中加飞机

    一个简短的引论: 谢意: 本申请中使用<Unity3D\2D移动游戏开发>提供资源.著作权属于作者.感谢作者.基于原始时本申请的二次开发. 要素: 1.增加2s cd的机身旋转,旋转时保持 ...

  6. HDN2048（交错复发）

    上帝.神与神 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Sub ...

  7. [LeetCode] Combinations [38]

    称号 Given two integers n and k, return all possible combinations of k numbers out of 1 ... n. For exa ...

  8. MysqL的root用户不允许远程连接

    原文:MysqL的root用户不允许远程连接 今天程序报了异常:java.sql.SQLException: Access denied for user 'root'@'RJB-Z' (using ...

  9. java得到clientIP地址和MAC住址

    最近的项目应该得到client的mac住址. 服务器移植centos制,arm建筑箱.client手机和移动设备.(其他方案也应该是一流的似的) 首先,要获得ip住址: 依据client的http请求 ...

  10. WPF学习（9）样式和行为

    在asp.net世界中,我们的美工人员会为我们准备好静态页面,它注意包括三个部分:html.css和js.而在WPF世界里,也同样有着类似这三个部分的静态页面:Xaml.Style和Behaviors ...