上一篇我们把打卡功能做完了接下来实现路径规划。效果是在地图上显示推荐游览路线我们要实现的效果很简单页面上放一个按钮点击后地图上自动画出一条路线从起点出发依次经过所有标记的打卡点最后到达终点。就像导航软件一样只不过我们的景点是用户自己标记的校园打卡点。一、添加导航按钮首先要在页面上放一个可以点击的按钮。这里继续用高德提供的CSS样式简单省事div classinput-card stylewidth:10rem; h4推荐游览路线/h4 div classinput-item button classbtn onclickstartAnimation()开始动画/button /div /div把这个div放在地图容器里面引入高德demo-center.css后就能得到一个带阴影的卡片式按钮。stylewidth:10rem控制卡片宽度h4是标题button是实际可点击的按钮。onclick绑定了startAnimation函数点击时触发路径规划。二、实现路径规划在上一节课代码的最后面不包含在地图监听点击事件的括号里独立出来写路径规划代码2.1 加载插件点击按钮时用户希望获取路线。首先通过AMap.plugin加载AMap.Driving插件。AMap.plugin(AMap.Driving, function() { // 插件加载完成后的回调 })2.2 创建Driving对象插件加载完成后创建一个Driving对象传入两个配置map指定路线显示在哪个地图上policy指定驾车策略。同时用LEAST_TIME表示优先选择时间最短的路线。var driving new AMap.Driving({ map: map, policy: AMap.DrivingPolicy.LEAST_TIME, })2.3 设置起点和终点然后定义起点和终点用AMap.LngLat创建经纬度对象。这两个坐标要根据实际校园位置来设置。var start new AMap.LngLat(114.400984, 30.518653) var end new AMap.LngLat(114.404755, 30.523851)AMap.LngLat是高德封装的经纬度类第一个参数是经度第二个参数是纬度。这两个坐标要根据实际校园位置来设置上面用的是武汉某高校附近的示例坐标。2.4 搜索路线调用driving.search方法搜索路线代⼊起点和终点这时候就能生成驾车路径了。回调函数里判断statuscomplete表示规划成功其他值表示失败。driving.search(start, end, function(status, result) { if (status complete) { console.log(路线规划成功) console.log(result) } else { console.log(路线规划失败) } })这样点击按钮后就实现了地图上从起点到终点的蓝色路线。三、添加途经点基础路径规划只能走两点之间但我们的智慧校园项目里标记了很多打卡点需要把这些点都串进路线里。这时候就要用到search函数的第三个参数opts。3.1 遍历标记点生成途经点opts是一个对象里面waypoints是途经点数组初始为空。然后通过geojson.eachOverlay遍历所有标记点.var opts { waypoints: [], } geojson.eachOverlay(function(item) { opts.waypoints.push(item.getPosition()) })这个方法是GeoJSON对象提供的会逐个返回每个覆盖物。函数里的item就是每一个标记点调用item.getPosition()获取它的经纬度push进waypoints数组。3.2 调用带途经点的search最后调用search时把opts作为第三个参数传进去。这样高德就会按照waypoints数组里的顺序从起点出发依次经过每个标记点最后到达终点。driving.search(start, end, opts, function(status, result) { if (status complete) { console.log(路线规划成功包含所有途经点) } else { console.log(路线规划失败) } })添加途经点后搜索路径就会考虑每一个点。当然这里的点是有顺序的必须一个一个的来而不是看谁和谁近。最终的效果就是点击开始动画按钮地图上显示从起点到终点的路线中间串联了所有用户标记的打卡点。大家可以先自己上手尝试看看。如果有不明白或者看不懂的地方戳我WebGIS开发零基础入门系列教程持续更新中关注我们不错过后面的内容更新
