【高德地图API】从零开始学高德JS API（五）路线规划——驾车|公交|步行

先来看两个问题：路线规划与导航有什么区别？步行导航与驾车导航有什么区别？

回答：

1、路线规划，指的是为用户提供3条路线推荐。【高德】在提供路线规划的时候，会提供用户自定义路线规划功能，这是别家没有做到的。导航，指的是为驾车用户提示路口信息，向左向右，进入匝道等信息。

2、我们这里说的步行导航和驾车导航，严格的说，应该是路线规划。从A地到B地，如果是驾车，路线规划会将公路路网做为搜索数据；如果是步行，过街天桥、地下通道、人行道做为搜索数据。

-------------------------------------------------------------------------------------------------------

 

一、路线规划——驾车

 1、驾车路线规划

有三种策略，分别是最短时间、最少费用、最短路径、规避拥堵（参考了实时交通数据，这个比较NB）。

LEAST_TIME，LEAST_FEE, LEAST_DISTANCE,REAL_TRAFFIC 

 

我们在这里采取驾车插件来做。代码：

//驾车导航  
function driving_route() {  
    clearMap();
    mapObj.plugin(["AMap.Driving"], function() {  
        var DrivingOption = {  
            policy: AMap.DrivingPolicy.LEAST_TIME   
        };          
        MDrive = new AMap.Driving(DrivingOption); //构造驾车导航类   
        AMap.event.addListener(MDrive, "complete", driving_routeCallBack); //返回导航查询结果  
        MDrive.search(start_xy, end_xy); //根据起终点坐标规划驾车路线  
    });      
}  

示意图：

 

2、驾车最后一公里步行

在最开始一段，和最后一段步行距离的时候，可以用虚线来表示。

代码：

    //起点到路线的起点 路线的终点到终点 绘制无道路部分  
    var extra_path1 = new Array();  
    extra_path1.push(start_xy);  
    extra_path1.push(steps[0].path[0]);  
    var extra_line1 = new AMap.Polyline({  
        map: mapObj,  
        path: extra_path1,  
        strokeColor: "#9400D3",  
        strokeOpacity: 0.7,  
        strokeWeight: 4,  
        strokeStyle: "dashed",   //虚线
        strokeDasharray: [10, 5]  
    });  
  
    var extra_path2 = new Array();  
    var path_xy = steps[(steps.length-1)].path;  
    extra_path2.push(end_xy);  
    extra_path2.push(path_xy[(path_xy.length-1)]);  
    var extra_line2 = new AMap.Polyline({  
        map: mapObj,  
        path: extra_path2,  
        strokeColor: "#9400D3",  
        strokeOpacity: 0.7,  
        strokeWeight: 4,  
        strokeStyle: "dashed",  //虚线
        strokeDasharray: [10, 5]  
    });  

 

效果图：

 

3、驾车导航拖拽效果

如果要可拖拽的效果，需要使用另外一个插件，AMap.DragRoute。

代码：

//可拖拽的驾车导航
function driving_route_drag(){
    clearMap();
    var path = [start_xy,end_xy];
    mapObj.plugin("AMap.DragRoute",function(){  
        MDrive = new AMap.DragRoute(mapObj, path, AMap.DrivingPolicy.LEAST_FEE); //构造拖拽导航类  
        MDrive.search(); //查询导航路径并开启拖拽导航  
    });
}

 

示意图：

 

示例查看：http://zhaoziang.com/amap/zero_5_1.html

 

二、路线规划——公交

 1、公交导航

公交导航不仅是路线相关的，还是根据公交车路线数据，进行查询。使用到插件AMap.LineSearch。

 

代码：

//公交线路查询
function lineSearch() {  
    clearMap();
    //加载公交线路查询插件  
    //实例化公交线路查询类，只取回一条路线  
    mapObj.plugin(["AMap.LineSearch"], function() {  
       var linesearch = new AMap.LineSearch({  
            pageIndex:1,  
            city:'北京',  
            pageSize:1,  
            extensions:'all'  
        });  
        //搜索“518”相关公交线路  
        linesearch.search('518');  
        AMap.event.addListener(linesearch, "complete", lineSearch_Callback);  
        AMap.event.addListener(linesearch, "error", function(e){alert(e.info);  
        });  
    });  
} 

 

效果图：

 

2、公交线路查询，如518

查询公交线路，需要注明城市。每个城市都可能有518路线，对吧。

 

代码：

//公交线路查询
function lineSearch() {  
    clearMap();
    //加载公交线路查询插件  
    //实例化公交线路查询类，只取回一条路线  
    mapObj.plugin(["AMap.LineSearch"], function() {  
       var linesearch = new AMap.LineSearch({  
            pageIndex:1,  
            city:'北京',  
            pageSize:1,  
            extensions:'all'  
        });  
        //搜索“518”相关公交线路  
        linesearch.search('518');  
        AMap.event.addListener(linesearch, "complete", lineSearch_Callback);  
        AMap.event.addListener(linesearch, "error", function(e){alert(e.info);  
        });  
    });  
}  

 

示意图：

 

3、通过站点，查公交线路

比如，我在北京东直门，想知道东直门都有哪些公交路线。使用服务插件AMap.StationSearch。

 

代码：

//公交站点查询 
function stationSearch() {  
    clearMap();
    //加载公交站点查询插件  
    mapObj.plugin(["AMap.StationSearch"], function() {        
        //实例化公交站点查询类  
        var station = new AMap.StationSearch({  
            pageIndex: 1, //页码  
            pageSize: 10, //单页显示结果条数  
            city:'010'    //确定搜索城市  
        });   
        station.search('东直门'); //查询  
        AMap.event.addListener(station, 'complete', stationSearch_CallBack);          
        AMap.event.addListener(station, 'error', function(e) {alert(e.info);});  
    });  
}  

 

示例图：

 

示例查看：http://zhaoziang.com/amap/zero_5_1.html

 

三、路线规划——步行

 步行，可以过天桥啊，地下通道啊，穿过小区啊，不能走高速公路啊，等特点。

 

代码：

//步行导航  
function walking_route() {  
    var MWalk;  
    mapObj.plugin(["AMap.Walking"], function() {          
        MWalk = new AMap.Walking(); //构造路线导航类   
        AMap.event.addListener(MWalk, "complete", walk_routeCallBack); //返回导航查询结果  
        MWalk.search(start_xy, end_xy); //根据起终点坐标规划步行路线  
    });  
}  

 

效果图：

 

示例查看：http://zhaoziang.com/amap/zero_5_1.html

 

四、小结

驾车，公交，步行的区别

1、从效果图里可以看出，这三种路线规划是搜索的不同数据库。

2、他们的服务插件不一样，都是通过【高德服务插件】进行调用。比原生API接口封装得更加完善，使用起来更加简单。

 

五、全部源代码

示例查看：http://zhaoziang.com/amap/zero_5_1.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>地图路线规划服务</title>
<link rel="stylesheet" type="text/css" href="zero.css" />
<script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=caaa086bdf5666322fba3baf5a6a2c03"></script>
</head>
<body onLoad="mapInit()">
    <div id="iCenter"></div>
    <div id="iControlbox">
        <p>坐标：<span id="lnglats">&nbsp;</span></p>
        <ul>
            <li>
                <button onclick="javascript:driving_route();">驾车路线规划</button>
                <button onclick="javascript:driving_route_drag();">可拖拽插件</button>
            </li>
            <li>
                <button onclick="javascript:transfer_route();">公交路线规划</button>
                <button onclick="javascript:lineSearch();">518路公交车</button>
                <button onclick="javascript:stationSearch();">东直门站点</button>
            </li>
            <li>
                <button onclick="javascript:walking_route();">步行路线规划</button>
            </