高德地图API从零开始学高德JS API五路线规划Word文件下载.docx
- 文档编号:12946399
- 上传时间:2022-10-01
- 格式:DOCX
- 页数:30
- 大小:19.42KB
高德地图API从零开始学高德JS API五路线规划Word文件下载.docx
《高德地图API从零开始学高德JS API五路线规划Word文件下载.docx》由会员分享,可在线阅读,更多相关《高德地图API从零开始学高德JS API五路线规划Word文件下载.docx(30页珍藏版)》请在冰豆网上搜索。
//驾车导航
functiondriving_route(){
clearMap();
mapObj.plugin(["
AMap.Driving"
],function(){
varDrivingOption={
policy:
AMap.DrivingPolicy.LEAST_TIME
};
MDrive=newAMap.Driving(DrivingOption);
//构造驾车导航类
AMap.event.addListener(MDrive,"
complete"
driving_routeCallBack);
//返回导航查询结果
MDrive.search(start_xy,end_xy);
//根据起终点坐标规划驾车路线
});
}
示意图:
2、驾车最后一公里步行
在最开始一段,和最后一段步行距离的时候,可以用虚线来表示。
//起点到路线的起点路线的终点到终点绘制无道路部分
varextra_path1=newArray();
extra_path1.push(start_xy);
extra_path1.push(steps[0].path[0]);
varextra_line1=newAMap.Polyline({
map:
mapObj,
path:
extra_path1,
strokeColor:
"
#9400D3"
strokeOpacity:
0.7,
strokeWeight:
4,
strokeStyle:
dashed"
//虚线
strokeDasharray:
[10,5]
varextra_path2=newArray();
varpath_xy=steps[(steps.length-1)].path;
extra_path2.push(end_xy);
extra_path2.push(path_xy[(path_xy.length-1)]);
varextra_line2=newAMap.Polyline({
extra_path2,
效果图:
3、驾车导航拖拽效果
如果要可拖拽的效果,需要使用另外一个插件,AMap.DragRoute。
//可拖拽的驾车导航
functiondriving_route_drag(){
varpath=[start_xy,end_xy];
mapObj.plugin("
AMap.DragRoute"
function(){
MDrive=newAMap.DragRoute(mapObj,path,AMap.DrivingPolicy.LEAST_FEE);
//构造拖拽导航类
MDrive.search();
//查询导航路径并开启拖拽导航
}
示例查看:
二、路线规划——公交
1、公交导航
公交导航不仅是路线相关的,还是根据公交车路线数据,进行查询。
使用到插件AMap.LineSearch。
//公交线路查询
functionlineSearch(){
//加载公交线路查询插件
//实例化公交线路查询类,只取回一条路线
AMap.LineSearch"
varlinesearch=newAMap.LineSearch({
pageIndex:
1,
city:
'
北京'
pageSize:
extensions:
all'
//搜索“518”相关公交线路
linesearch.search('
518'
);
AMap.event.addListener(linesearch,"
lineSearch_Callback);
error"
function(e){alert(e.info);
2、公交线路查询,如518
查询公交线路,需要注明城市。
每个城市都可能有518路线,对吧。
3、通过站点,查公交线路
比如,我在北京东直门,想知道东直门都有哪些公交路线。
使用服务插件AMap.StationSearch。
//公交站点查询
functionstationSearch(){
//加载公交站点查询插件
AMap.StationSearch"
//实例化公交站点查询类
varstation=newAMap.StationSearch({
1,//页码
10,//单页显示结果条数
010'
//确定搜索城市
station.search('
东直门'
//查询
AMap.event.addListener(station,'
complete'
stationSearch_CallBack);
error'
function(e){alert(e.info);
});
示例图:
三、路线规划——步行
步行,可以过天桥啊,地下通道啊,穿过小区啊,不能走高速公路啊,等特点。
//步行导航
functionwalking_route(){
varMWalk;
AMap.Walking"
MWalk=newAMap.Walking();
//构造路线导航类
AMap.event.addListener(MWalk,"
walk_routeCallBack);
MWalk.search(start_xy,end_xy);
//根据起终点坐标规划步行路线
四、小结
驾车,公交,步行的区别
1、从效果图里可以看出,这三种路线规划是搜索的不同数据库。
2、他们的服务插件不一样,都是通过【高德服务插件】进行调用。
比原生API接口封装得更加完善,使用起来更加简单。
五、全部源代码
&
lt;
!
DOCTYPEHTML&
gt;
html&
head&
metahttp-equiv="
Content-Type"
content="
text/html;
charset=utf-8"
title&
地图路线规划服务&
/title&
linkrel="
stylesheet"
type="
text/css"
href="
zero.css"
/&
scriptlanguage="
javascript"
src="
/head&
bodyonLoad="
mapInit()"
&
divid="
iCenter"
/div&
iControlbox"
p&
坐标:
spanid="
lnglats"
amp;
nbsp;
/span&
/p&
ul&
li&
buttononclick="
javascript:
driving_route();
"
驾车路线规划&
/button&
driving_route_drag();
g
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 高德地图API从零开始学高德JS API五路线规划 地图 API 从零开始 学高德 JS 路线 规划