WebGIS开发【智慧校园】实战案例：20. 项目实战（三）

推荐游览路线和动画效果：

本课先实现导航功能，就是路劲规划功能。 
⾸先，在地图上添加⼀个div框，实现导航按钮。

代码：  

<div class="input-card" style="width:10rem;"> 
<h4>推荐游览路线</h4> 
<div class="input-item"> 
<button class="btn" onclick="startAnimation()">开始动画 
</button> 
</div> 
</div> 

和添加按钮类似，只要使⽤高德的CSS就可获得相应的UI 这⾥实现了，⼀个可以点击导航的按钮： 

按这个按钮的时候，用户希望获取路线。这⾥就需要写⼀个回调函数。 
在上⼀节课的基础上，在最后面（不包含在地图监听地图点击事件的括号里独⽴出来）写代码： 

function startAnimation(){ 
AMap.plugin('AMap.Driving',function(){ 
var driving = new AMap.Driving({ 
map:map, 
policy: AMap.DrivingPolicy.LEAST_TIME,//驾⻋策略 
                }) 
//设置起点和终点 
var start = new AMap.LngLat(114.400984, 30.518653) var end = new AMap.LngLat(114.404755, 30.523851) driving.search(start,end,function(status, result){ 
if(status=='complete'){ 
                    }else{ 
                    } 
                }) 
            }) 
        } 

⾸先，实现了对按钮单击的回调，先创建⼀个驾驶对象，这个对象规定了显示在地图上，同时采取最短时间的驾车策略。 
随后，定义两个对象，这两个对象赋予经纬度，作为起点和终点。
之后，开始使用search方法，并代⼊起点和终点，这时候就能生成驾车路径了。注意，这⾥还多谢了个 驾车搜索的回调函数，这个函数目前是空的。 
这样就实现了图中的效果。 
下面来看⼀下怎么增加途经点。 
这里可以设置⼀个可选项，这就是search函数的第三个参数，我们上面省略了的。

function startAnimation(){ 
AMap.plugin('AMap.Driving',function(){ 
var driving = new AMap.Driving({ 
map:map, 
policy: AMap.DrivingPolicy.LEAST_TIME,//驾⻋策略 
                }) 
//设置起点和终点 
var start = new AMap.LngLat(114.400984, 30.518653) 
var end = new AMap.LngLat(114.404755, 30.523851) 
// 创建途经点 
var opts = { 
waypoints: [], 
                } 
geojson.eachOverlay(function(item){//拿到每⼀个点 
opts.waypoints.push(item.getPosition()) 
                }) 
driving.search(start,end,opts,function(status, result){ if(status=='complete'){ 
                    }else{ 
                    } 
                }) 
            }) 
        } 

添加途经点后，搜索路径就会考虑每⼀个点，当然，这⾥的点是有顺序的，必须⼀个⼀个的来，而 不是看谁和谁近。 
最终的效果如下：