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

·  阅读 1982

这是我参与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 (用于获取驾车路线规划方案)。简单介绍下要使用的函数:
  1. search() 检索路线。传入两个点,路线开始点,路线结束点。自动生成绘两点之间的线路点。
  2. setSearchCompleteCallback() 检索结束后的回调函数。检索完成后,获取DrivingRoute的线路点数组,使用Polyline覆盖物绘制路线。
  3. 每一次,检索路线完成后都会调用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)
      })
复制代码
  • 绘制线路就完成了,是不是很简单。 image.png

添加起点、终点、途经点

  • 简单理解就是在对应的位置绘制标记,标记其实就是覆盖物。
  • 通过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)
复制代码
  • 最后效果

image.png

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改