高德地圖API之貨車路線

来源:https://www.cnblogs.com/chenyingying0/archive/2020/03/07/12435097.html
-Advertisement-
Play Games

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


貨車路線：

引入 AMap.TruckDriving

註意：和駕車路線、步行路線不同的是，必須指定cidy和size，並且坐標傳入為json格式

<!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.TruckDriving,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
        });   
        console.log(map.getCenter().toString());//121.549792,29.868388

        new AMap.TruckDriving({
            map:map,
            panel:"panel",
            city:"寧波",
            size:1
        }).search([{lnglat:[121.549792,29.868388]},{lnglat:[121.549792,30.468388]},{lnglat:[121.549792,31.368388]}],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.TruckDriving,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
        });   
        console.log(map.getCenter().toString());//121.549792,29.868388

        new AMap.TruckDriving({
            map:map,
            panel:"panel",
            city:"寧波",
            size:1
        }).search([
            {keyword:"寧波大學"},
            {keyword:"寧波老外灘"}
        ],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.TruckDriving,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
        });   
        console.log(map.getCenter().toString());//121.549792,29.868388

        new AMap.TruckDriving({
            map:map,
            panel:"panel",
            city:"寧波",
            size:1
        }).search([
            {keyword:"寧波大學"},
            {keyword:"寧波老外灘"},
            {keyword:"寧波大廈"}
        ],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.TruckDriving,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
        });   
        console.log(map.getCenter().toString());//121.549792,29.868388

        new AMap.Autocomplete({
            input:"node1"
        })
        new AMap.Autocomplete({
            input:"node2"
        })

        btn.onclick=function(){
            new AMap.TruckDriving({
                map:map,
                panel:"panel",
                city:"寧波",
                size:1
            }).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.TruckDriving,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="node3"><br>
        終點<input type="text" id="node2"><br>
        <button id="btn">開始導航</button>
    </div>


    <script>
        var map=new AMap.Map("container",{
            zoom:11
        });   
        console.log(map.getCenter().toString());//121.549792,29.868388

        new AMap.Autocomplete({
            input:"node1"
        })
        new AMap.Autocomplete({
            input:"node2"
        })
        new AMap.Autocomplete({
            input:"node3"
        })

        btn.onclick=function(){
            new AMap.TruckDriving({
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • # ES6學習筆記（四）：教你理解ES6的新增語法
    let ES6新增的用於聲明變數的關鍵字 let聲明的變數只在所處於的塊級有效 不存在變數提升 暫時性死區 註意： 使用let 關鍵字聲明的變數才具有塊級作用域，使用var聲明的變數不具備塊級作用域特性。 在一個大括弧中，使用let 關鍵字聲明的變數才具有塊級作用域，var關鍵字是不具備這個特點的。 ...
  • jQuery的語法
    jQuery的語法相對容易，而且插件豐富，功能強大$(" ") 用來選擇表簽，可以是$("span") 直接選擇 <span>$("#abc") 選擇 ID 為 abc 的標簽$(".abc") 選擇class 為 abc 的標簽html( ) 是函數 意思是把() 里的內容放到指定標簽里$(".f ...
  • 高德地圖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 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類