高德地图api之路线规划

2021-02-14 12:01:33 阅读：459 来源： 互联网

标签：map const 路线 start api AMap end 高德 panel

基本使用步骤

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>

标签：map,const,路线,start,api,AMap,end,高德,panel
来源： https://www.cnblogs.com/zoo-x/p/14401730.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

高德地图api之路线规划

基本使用步骤