有几个做汽车导航的朋友问我说,他们想在地图上制作一辆车沿着道路行驶
的动画。可是,百度地图
的道路数据
并没有公开
。所以,应该怎么办呢?
一、
我们先来学习如何把百度地图“弄”出来。把下面这段代码保存为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[
0
],{icon:myIcon});
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
)
//
图片的偏移量。为了是图片底部中心对准坐标点。
});
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(
0
).getRoute(
0
).getPath();
//
通过驾车实例,获得一系列点的数组
var
paths
=
pts.length;
//
获得有几个点
}
五、
道路数据获取完毕。接下来是汽车图片的展示。可以通过改变marker的坐标点来实现,改变marker坐标的接口setPosition。
我们假设每100毫秒改变一次,利用延时函数setTimeout。
同样,由于ajax异步加载原因,需要异步给i赋值。
i
=
0
;
function
resetMkPoint(i){
carMk.setPosition(pts[i]);
if
(i
<
paths){
setTimeout(
function
(){
i
++
;
resetMkPoint(i);
},
100
);
}
}
setTimeout(
function
(){
resetMkPoint(
1
);
console.log(i);
},
100
)
六、
接下来,可以点击这里,运行示例。
点击左侧的“开始”按钮,动画开始播放。
点击下侧的“获取代码”按钮,可得到全部源代码。
七、
最后,放出全部源代码:
<
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
>
分享到:
相关推荐
代码借助selenium实现了百度地图的动态抓取,可以直接从百度地图获取数据,很好的解决了api端口的配额限制。
html读取json数据百度地图api加载json数据加载marker图标
利用百度地图API,实现在地图上搜索位置周边信息,并显示。
百度地图API是为开发者免费提供的一套基于百度地图服务的应用接口,包括JavaScript API、Web服务API、Android SDK、iOS SDK、定位SDK、车联网API、LBS云等多种开发工具与服务,提供基本地图展现、搜索、定位、逆/...
将百度地图嵌入c# cs窗体中,cs...查了很多资料,参考网上众多朋友的代码及百度地图API demo,这个例子中的js代码不用key,方便很多,使用的是v1.4版,少了很多限制,使用.net4.5开发的,可以将c#代码转为低版本也行的。
将百度地图嵌入c# cs窗体中,... 查了很多资料,参考网上众多朋友的代码及百度地图API demo,这个例子中的js代码不用key,方便很多,使用的是v1.4版,少了很多限制,使用.net4.5开发的,可以将c#代码转为低版本也行的。
百度地图API是一套为开发者免费提供的基于百度地图的应用程序接口,包括JavaScript、iOS、Andriod、静态地图、Web服务等多种版本,提供基本地图、位置搜索、周边搜索、公交...
基于百度地图API开发 可以自定义任何标记 并可以搜索得到自定义标记。还可以显示路线方案
利用百度地图API实现在地图车辆的平滑移动,轨迹回放,多台车辆同时平滑移动
百度地图 API 自定义地图底层 WEB 版本 用于用户自定义地图的底层
百度地图api离线版,基于api2.0,带demo和示例数据,支持google地图转换,转换所需的GoogleToBaidu.jar也在本压缩包内
基于百度地图API的安徽省地震灾情调查系统设计研究.docx基于百度地图API的安徽省地震灾情调查系统设计研究.docx基于百度地图API的安徽省地震灾情调查系统设计研究.docx基于百度地图API的安徽省地震灾情调查系统设计...
通过C++代码调用百度地图API,一个简单实用的百度地图操作实例,希望能给大家带来帮助。
百度地图的api文档
python调用百度地图API实现经纬度换算、热力地图全流程指南
一款基于百度地图API做成的地区地图 ,插件描述:可根据xml返回的数据控制插件,也可以本地控制插件、地区三级级联查询、地区联动地图的插件,在线搜索. 参考示例:http://www.jq22.com/jquery-info5915
百度地图API实例百度地图API实例百度地图API实例百度地图API实例百度地图API实例百度地图API实例百度地图API实例
1.1 百度地图 API 概念 1.2 百度地图的“Hello, World” 1.2.1 引用百度地图API文件 1.2.2创建地图容器元素 1.2.3命名空间 1.2.4创建地图实例 1.2.5创建点坐标 1.2.6 初始化地图 1.2.7地图操作 2应用示例 ...
Qt5实现百度地图API的调用——物体轨迹的设计、插入、删除、保存、读取。使用js文件实现Qt和API之间的沟通。https://mp.csdn.net/editor/html/114036591中有项目效果运行截图和简要的说明,欢迎交流。
使用javascript 调用百度地图api 调用百度地图api 非常简单