高德地圖API之駕車路線_ZenDei技術網路在線

高德地圖API之駕車路線

-Advertisement-

駕車路線引入插件 AMap.Driving <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=AMap.Driv ...

駕車路線

引入插件 AMap.Driving

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=AMap.Driving,AMap.Autocomplete"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=AMap.Driving"></script> 
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
        #panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;}
    </style>
</head>
<body>
    <div id="container"></div> 
    <div id="panel"></div>

    <script>
        var map=new AMap.Map("container",{
            zoom:11
        });    

        //使用插件
        new AMap.Driving({
            map:map,
            panel:"panel"
        }).search([
            {keyword:"寧波大學",city:"寧波"},
            {keyword:"汽車東站",city:"寧波"}
        ],function(status,data){
            console.log(data);
        });

    </script>    
</body>
</html>

輸入起點和終點，點擊按鈕規劃路線

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=AMap.Driving,AMap.Autocomplete"></script> 
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
        #panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;}
        #search{position: absolute;width:200px;height:100px;top:10px;left:10px;background-color: #fff;}
    </style>
</head>
<body>
    <div id="container"></div> 
    <div id="panel"></div>
    <div id="search">
        起點<input type="text" id="node1"><br>
        終點<input type="text" id="node2"><br>
        <button id="btn">開始導航</button>
    </div>

    <script>
        var map=new AMap.Map("container",{
            zoom:11
        });   

        // 給起點和終點添加自動補全功能
        new AMap.Autocomplete({
            input:"node1"
        }) 
        new AMap.Autocomplete({
            input:"node2"
        }) 

        btn.onclick=function(){
            //使用插件
            new AMap.Driving({
                map:map,
                panel:"panel"
            }).search([
                {keyword:node1.value,city:"寧波"},
                {keyword:node2.value,city:"寧波"}
            ],function(status,data){
                console.log(data);
            });
        }
        

    </script>    
</body>
</html>

通過經緯度來進行導航

實現滑鼠點擊兩個地址，自動進行導航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=AMap.Driving,AMap.Autocomplete"></script> 
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
        #panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;}
        #search{position: absolute;width:200px;height:100px;top:10px;left:10px;background-color: #fff;}
    </style>
</head>
<body>
    <div id="container"></div> 
    <div id="panel"></div>

    <script>
        var map=new AMap.Map("container",{
            zoom:11
        });   
        
        var i=0,arr=[];
        map.on("click",function(e){
            i++;
            console.log(i);
            
            if(i%2==1){
                arr=[e.lnglat.R,e.lnglat.Q];
                
            }else{
                //使用插件
                new AMap.Driving({
                    map:map,
                    panel:"panel"
                }).search(new AMap.LngLat(arr[0],arr[1]),new AMap.LngLat(e.lnglat.R,e.lnglat.Q),function(status,data){
                    console.log(data);
                });                
            }
        })
        

    </script>    
</body>
</html>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

高德地圖API實例--移動端婚禮請帖

效果圖首先添加移動端meta <meta name="viewport" content="initial-scale=1.0,user-scaleble=no,width=device-width"> <!DOCTYPE html> <html lang="en"> <head> <meta c ...
高德地圖API之DOM事件+自定義事件

AMap.event.addDomListener() 綁定事件 AMap.event.removeListener() 解綁事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>map</title> <s ...
高德地圖API事件-滑鼠事件

覆蓋物狀態改變時觸發的事件 mousemove mouseover mouseout <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>map</title> <script type="text/javasc ...
高德地圖API事件-載入+改變等級+改變中心點

地圖內部狀態改變時觸發的事件 complete <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>map</title> <script type="text/javascript" src="https:// ...
高德地圖API之公交路線

引入插件 AMap.Transfer <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>map</title> <script type="text/javascript" src="https://webap ...
高德地圖API之騎行路線

騎行路線 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>map</title> <script type="text/javascript" src="https://webapi.amap.com/map ...
高德地圖API之貨車路線

貨車路線：引入 AMap.TruckDriving 註意：和駕車路線、步行路線不同的是，必須指定cidy和size，並且坐標傳入為json格式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>map</ti ...
高德地圖API之步行路線

步行路線引入插件 AMap.Walking <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=AMap.Walk ...