高德地图规划路线编写

1、创建承载地图的dom元素

 
<style>
        #container {
            height: 80%;
            width: 80%;
        }
 
</style>

 <style type="text/css">
        #panel {
            position: fixed;
            background-color: white;
            max-height: 90%;
            overflow-y: auto;
            top: 10px;
            right: 10px;
            width: 280px;
        }

        #panel .amap-call {
            background-color: #009cf9;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }

        #panel .amap-lib-driving {
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
            overflow: hidden;
        }
    </style>




<div id="container"></div>
 <div id="panel"></div>

2、引入需要的一些插件

 <!-- 加载地图JSAPI脚本 -->
    <script type="text/javascript">
        window._AMapSecurityConfig={
            securityJsCode: '2badf6d16a37da1a7ba6654dc816dc0f',
        };
    </script>
    <!-- 高德的loader -->
    <script src="https://webapi.amap.com/loader.js"></script>

3、实例化地图

 AMapLoader.load({
            key: '8afe356ee5bb2ef0b4ac7a37c380c804', // 申请好的Web端开发者Key，首次调用 load                                             时必填
            version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        }).then((AMap) => {

//所有代码都需要在.then中写 因为都是基于它的AMap操作的
 })

4、直接编写

const map=new AMap.Map('container',{
                    resizeEnable: true,
                    center: [116.397428,39.90923],//地图中心点
                    zoom: 13 //地图显示的缩放级别
                });
                //构建路线的函数
                const luxian=function() {
                    // 声明的起点和终点
                    // 数组第一项为起点 第二项为终点
                    let arr=[
                        {keyword: '积云',city: '北京'},
                        {keyword: '北大',city: '北京'}
                    ]
                    AMap.plugin(['AMap.Driving'],function() {
                        driving=new AMap.Driving(map)
                        //构造路线导航类
                        driving=new AMap.Driving({
                            map: map,
                            panel: "panel"
                        });

                        driving.search(
                            arr,
                            function(status,result) {
                                // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
                                if(status==='complete') {
                                    console.log('绘制驾车路线完成');
                                } else {

                                    console.log('获取驾车数据失败：'+result);
                                }
                            });
                    })

                }
                luxian()