高德地图api之路线规划

基本使用步骤

  • 1.引入

     <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key"></script>
    
  • 2.创建并初始化实例对象

    <div id="container"></div>	
    
    const map = new AMap.Map("container")
    
  • 3.创建一个导航元素,用来承载导航路线(这里不要忘了,是个坑,用的啥时候踩过,文档里没有详细说)

    <div id="panel"></div>
    
  • 4.使用路线规划插件
    这里先拿驾车路线规划举个例子

    假设var start = "*", end = "人民大会堂"

    AMap.plugin('AMap.Driving', function () {
        const driving = new AMap.Driving({
              // 驾车路线规划策略,AMap.DrivingPolicy.LEAST_TIME是最快捷模式
              policy: AMap.DrivingPolicy.LEAST_TIME,
              // map 指定将路线规划方案绘制到对应的AMap.Map对象上
              map: map,
              // panel 指定将结构化的路线详情数据显示的对应的DOM上,传入值需是DOM的ID
              panel: 'panel'
         })
    
    	const points = [
    		  { keyword: start },
              { keyword: end }
        ]
    
        // 搜索完成后,将自动绘制路线到地图上
        driving.search(points)
    })
    

    当然不只有驾车路线规划,还有其他类型:

    • 步行规划

      AMap.plugin('AMap.Walking', function () {
                      const walking = new AMap.Walking({
                          map: map,
                          panel: 'panel'
                      })
                      const points = [
                          { keyword: start },
                          { keyword: end }
                      ]
                      walking.search(points)
                  })
      
    • 骑行规划

      AMap.plugin('AMap.Riding', function () {
                      const riding = new AMap.Riding({
                          map: map,
                          panel: 'panel'
                      })
                      const points = [
                          { keyword: start },
                          { keyword: end }
                      ]
                      riding.search(points)
                  })
      
    • 公交规划

       AMap.plugin('AMap.Transfer', function () {
                      const transfer = new AMap.Transfer({
                          map: map,
                          panel: 'panel'
                      })
                      const points = [
                          { keyword: start },
                          { keyword: end }
                      ]
                      transfer.search(points)
                  })
      
    • 货车规划(一天只能调用100次,超过收费)

      AMap.plugin('AMap.TruckDriving', function () {
                      const truckDriving = new AMap.TruckDriving({
                          map: map,
                          panel: 'panel',
                          // policy: ,
                          size: 1, // 必填, 车辆大小
                      })
                      const points = [
                          { keyword: start },
                          { keyword: end }
                      ]
                      truckDriving.search(points)
                  })
      
  • 以上只是简单的实现,具体的属性和方法还是要看文档的

  • 附demo:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        起始点:<input type="text" id="start">
        目的地:<input type="text" id="end">
        <button onclick="gui(1)">步行规划</button>
        <button onclick="gui(2)">骑行规划</button>
        <button onclick="gui(3)">驾车规划</button>
        <button onclick="gui(4)">公交规划</button>
        <button onclick="gui(5)">货车规划</button>
    
        <div id="container" style="width: 50vw;height: 50vw;"></div>
        <div id="panel"></div>
        <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=你的key"></script>
        <script>
    
            const map = new AMap.Map('container')
    
            function gui(tab) {
                const start = document.getElementById('start').value
                const end = document.getElementById('end').value
                switch (tab) {
                    case 1:
                        walking(start, end)
                        break;
                    case 2:
                        riding(start, end)
                        break;
                    case 3:
                        driving(start, end)
                        break;
                    case 4:
                        transfer(start, end)
                        break;
                    case 5:
                        truckDriving(start, end)
                        break;
                }
            }
    
    
    
    
            // 步行规划
            function walking(start, end) {
                AMap.plugin('AMap.Walking', function () {
                    const walking = new AMap.Walking({
                        map: map,
                        panel: 'panel'
                    })
                    const points = [
                        { keyword: start },
                        { keyword: end }
                    ]
                    walking.search(points)
                })
            }
    
            // 骑行规划
            function riding(start, end) {
                AMap.plugin('AMap.Riding', function () {
                    const riding = new AMap.Riding({
                        map: map,
                        panel: 'panel'
                    })
                    const points = [
                        { keyword: start },
                        { keyword: end }
                    ]
                    riding.search(points)
                })
            }
    
    
            // 驾车规划
            function driving(start, end) {
                AMap.plugin('AMap.Driving', function () {
                    const driving = new AMap.Driving({
                        // 驾车路线规划策略,AMap.DrivingPolicy.LEAST_TIME是最快捷模式
                        policy: AMap.DrivingPolicy.LEAST_TIME,
                        // map 指定将路线规划方案绘制到对应的AMap.Map对象上
                        map: map,
                        // panel 指定将结构化的路线详情数据显示的对应的DOM上,传入值需是DOM的ID
                        panel: 'panel'
                    })
                    const points = [
                        { keyword: start },
                        { keyword: end }
                    ]
                    // 搜索完成后,将自动绘制路线到地图上
                    driving.search(points)
                })
            }
    
            // 公交规划
            function transfer(start, end) {
                AMap.plugin('AMap.Transfer', function () {
                    const transfer = new AMap.Transfer({
                        map: map,
                        panel: 'panel'
                    })
                    const points = [
                        { keyword: start },
                        { keyword: end }
                    ]
                    transfer.search(points)
                })
            }
    
            // 货车路径规划
            function truckDriving(start, end) {
                AMap.plugin('AMap.TruckDriving', function () {
                    const truckDriving = new AMap.TruckDriving({
                        map: map,
                        panel: 'panel',
                        // policy: ,
                        size: 1, // 必填, 车辆大小
                    })
                    const points = [
                        { keyword: start },
                        { keyword: end }
                    ]
                    truckDriving.search(points)
                })
            }
    
    
    
        </script>
    
    </body>
    
    </html>
    
上一篇:grafana与zabbix的结合


下一篇:wxPython借助wxFormBuiler来编写一个简单的文本编辑器