百度地图 路书动态加载规划

<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>路书</title>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #map_canvas {
            width: 100%;
            height: 500px;
        }

        #result {
            width: 100%
        }
    </style>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=NqENdsDTP1QxhUn047Z7C6Tfsgv5X1mj"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
</head>
<body>
<div id="map_canvas"></div>
<div id="result"></div>
<button id="run">开始</button>
<button id="stop">停止</button>
<button id="pause">暂停</button>
<button id="hide">隐藏信息窗口</button>
<button id="show">展示信息窗口</button>
<script>
  var map = new BMap.Map('map_canvas')
  map.enableScrollWheelZoom()
  map.centerAndZoom(new BMap.Point(116.404, 39.915), 13)
  var lushu
  var arrPois = []
  // 实例化一个驾车导航用来生成路线
  var drv = new BMap.DrivingRoute('北京', {
    onSearchComplete: function (res) {
      if (drv.getStatus() == BMAP_STATUS_SUCCESS) {
        var plan = res.getPlan(0)

        for (var j = 0; j < plan.getNumRoutes(); j++) {
          var route = plan.getRoute(j)
          arrPois = arrPois.concat(route.getPath())
        }
        map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#111'}))
        map.setViewport(arrPois)

        lushu = new BMapLib.LuShu(map, arrPois, {
          defaultContent: '',//"从天安门到百度大厦"
          autoView: true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
          icon: new BMap.Icon('http://lbsyun.baidu.com/jsdemo/img/car.png', new BMap.Size(52, 26), {anchor: new BMap.Size(27, 13)}),
          speed: 45000,
          enableRotation: true,//是否设置marker随着道路的走向进行旋转
          landmarkPois: [
            {lng: 116.314782, lat: 39.913508, html: '加油站', pauseTime: 2}
          ]
        })
        lushu.start()

        setTimeout(function () {
          var drv1 = new BMap.DrivingRoute('北京', {
            onSearchComplete: function (res) {
              if (drv.getStatus() == BMAP_STATUS_SUCCESS) {
                var route = res.getPlan(0).getRoute(0)
                arrPois.push(...route.getPath())
                map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#111'}))
              }
            }
          })
          let start1 = new BMap.Point(117.404, 40.915)
          let end2 = new BMap.Point(118.404, 41.915)
          drv1.search(start1, end2)
        }, 3000)

      }
    }
  })

  let start = new BMap.Point(116.404, 39.915)
  let end = new BMap.Point(117.404, 40.915)
  drv.search(start, end)

  function $ (element) {
    return document.getElementById(element)
  }
</script>
</body>
</html>

 

 

 

谢谢阅读.如果觉得对你有帮助请记得点赞或收藏.欢迎留言讨论.你的支持是我出产优秀博客的动力.