百度地图 - 绘制驾车路线图 | 8月更文挑战

这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战

简介

在地图的开发中，最常出现的需求就是驾车线路规划。没开发过的人都会认为比较复杂，当把文档看了一遍之后你就会发现百度api比我们想象中还要强大。下面就开始介绍如何通过百度api轻松的实现这个功能。

创建地图

通过<script>标签引入百度地图地址，这里的ak是你在地图服务中心注册的。不了解的可以点这里

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>地图</title>
    <style type="text/css">
      html,
      body {
        height: 100%;
        width: 100%;
      }
      .bmap {
        height: 100%;
        width: 100%;
      }
    </style>
    <script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=?"></script>
  </head>
  <body>
    <div id="bmap" class="bmap"></div>
    <script>
      var map = new BMapGL.Map('bmap') // 创建Map实例
      // 初始化地图,设置中心点坐标和地图级别
      map.centerAndZoom(new BMapGL.Point(121.480509, 31.23592), 10)
      // 启用 鼠标滚轮事件
      map.enableScrollWheelZoom()
    </script>
  </body>
</html>

这样一张简单的地图就创建好了

绘制路线

在绘制路线之前，我们需要知道途径点地理坐标。有两种方式，一种是使用拾取坐标系统手动获取我们需要的城市坐标，另一种是使用Geocoder()地址解析服务，自动获取城市坐标。

      // 手动获取点
      var pot1 = new BMapGL.Point(106.55276, 29.567551) // 重庆
      var pot2 = new BMapGL.Point(112.94432, 28.236163) // 长沙
      var pot3 = new BMapGL.Point(120.211486, 30.255827) // 杭州
      var pot4 = new BMapGL.Point(121.481115, 31.235682) // 上海

到这就可以使用DrivingRoute （用于获取驾车路线规划方案）。简单介绍下要使用的函数：

search() 检索路线。传入两个点，路线开始点，路线结束点。自动生成绘两点之间的线路点。
setSearchCompleteCallback() 检索结束后的回调函数。检索完成后，获取DrivingRoute的线路点数组，使用Polyline覆盖物绘制路线。
每一次，检索路线完成后都会调用setSearchCompleteCallback()的回调，这样我们就可以对不同的线路，设置不同的样式。

      // 创建驾车实例
      var driv = new BMapGL.DrivingRoute(map)
      // 路线规划
      driv.search(pot1, pot2)
      driv.search(pot2, pot3)
      driv.search(pot3, pot4)

      driv.setSearchCompleteCallback(function () {
        // 通过驾车实例，获得一系列点的数组
        var pts = driv.getResults().getPlan(0).getRoute(0).getPath() 
        var polyline = new BMapGL.Polyline(pts)
        map.addOverlay(polyline)
      })

绘制线路就完成了，是不是很简单。

添加起点、终点、途经点

简单理解就是在对应的位置绘制标记，标记其实就是覆盖物。
通过BMapGL.Icon()可以自定义图片来设置标注点。因为我并未去找图片，这里直接使用Marker()原本的样式。
开发中需要对途径点添加说明，同样的可以使用Label()覆盖物来添加文本。为了样式更加好看，通过修改Label()的属性，来可以实现各种样式。
也可以自定义canvas覆盖物，实现动画效果(后面会讲解如何实现自定义覆盖物)。

      // 给每个点创建Marker
      var m1 = new BMapGL.Marker(pot1)
      var m2 = new BMapGL.Marker(pot2)
      var m3 = new BMapGL.Marker(pot3)
      var m4 = new BMapGL.Marker(pot4)
      map.addOverlay(m1)
      map.addOverlay(m2)
      map.addOverlay(m3)
      map.addOverlay(m4)

      // 自定义文本标注样式
      var style = {
        borderRadius: '5px',
        borderColor: '#ccc',
        padding: '5px',
        fontSize: '16px',
        height: '30px',
        lineHeight: '30px',
        fontFamily: '微软雅黑'
      }

      // 添加说明
      var lab1 = new BMapGL.Label('起点', { position: pot1 })
      style.backgroundColor = '#00FFFF'
      lab1.setStyle(style)
      var lab2 = new BMapGL.Label('途径点', { position: pot2 })
      style.backgroundColor = '#F5F5DC'
      lab2.setStyle(style)
      var lab3 = new BMapGL.Label('途径点', { position: pot3 })
      style.backgroundColor = '#F5F5DC'
      lab3.setStyle(style)
      var lab4 = new BMapGL.Label('终点', { position: pot4 })
      style.backgroundColor = '#DC143C'
      lab4.setStyle(style)
      map.addOverlay(lab1)
      map.addOverlay(lab2)
      map.addOverlay(lab3)
      map.addOverlay(lab4)

线路绘制后视野还是在原始位置，这里就需要使用setViewport，根据提供的地理区域或坐标设置地图视野，调整后的视野会保证包含提供的地理区域或坐标。
简单理解就是只要有点对象数组传进去，系统就会帮你修改视野。
为了更好的体验这里加了延时，当线绘制好了在修改视野。

setTimeout(function () {
    // 调整到最佳视野
    map.setViewport([pot1, pot2, pot3, pot4])
}, 1000)

最后效果