100 lines of code to achieve two lines map

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
        <title>高德地图api初体验</title>
        <style type="text/css">
            html,
            body,
            #container {
                width: 100%;
                height: 100%;
            }
        </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>
        <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
        <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
        <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ae24323514e4526432b636483930548e&plugin=AMap.Driving"></script>
        <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></Script > 
    </ head > 
    < body > 


        <-! My key: ae24323514e4526432b636483930548e 
         one day 6000 a total of 100 times per second 
         -> 
        < div the above mentioned id = "Container" > </ div > 
        < div the above mentioned id = "Panel" > < / div > 
        < Script type = "text / JavaScript" > 
            // define a driving route 
            let origin =  ' Tiananmen '  // starting point must be set to 
            let the end =  'Sydney Opera House '  //End must be set to 
            let pass =  ' Beijing East Railway Station '  // can be empty as empty ( '') will place no passing 
            // base map is loaded 
            var the Map =  new new AMap.Map ( " Container " , { 
                resizeEnable: to true , 
                Center : [ 116.397428 , 39.90923 ], @ map center 
                : zoom 13 is  // zoom level of the map display 
            });
             // configured to route guidance based 
            var Driving =  new new  AMap.Driving ({
                map: map, 
                Panel: " Panel " 
            }); 
            the let Fn =  function () { 

                // from the end of the name according to car navigation route planning 

                // the name of the first array of objects is described starting from as many 

                // second array is the name of the object end, as much as described 
                driving.search ([{ 
                        keyword: the starting point, 
                        City: ' Beijing ' 
                    }, 
                    { 
                        keyword: passing, 
                        City: ' Beijing ' 
                    }, 
                    {
                        keyword: end,
                        City:  Result)' Beijing ' 
                    } 
                ], function (Status, Result) {
                     // Result i.e. a car navigation information corresponding to the data structure of the document refer to https://lbs.amap.com/api/javascript-api/reference/ Search # m_DrivingResult-route 
                    IF (Status ===  ' complete ' ) { 
                        log.success ( ' rendering driving directions to complete ' ) 
                    } the else { 
                        log.error ( ' Get driving data failed: '  + 
                    } 
                });
            }

            fn()
        </script>
    </body>
</html>

Man of few words said, directly on the code

Friends make the realization of a function input two addresses on a page, automatically generate circuit diagrams,

I looked a little vain for several hours before the document comes out, but most of aip are similar, and more engaged in for some time to understand, or too little time ah

use---

　　　　Build a html page, paste saved can use, but the test, then okay, if used, or to go to high moral map application developers a key platform for their own code, replacing me on it

100 lines of code to achieve two lines map

Guess you like