JS 百度地圖路書---動態路線

来源:https://www.cnblogs.com/nelsonlei/archive/2020/01/16/12200274.html
-Advertisement-
Play Games

JS 百度地圖路書 動態路線 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-sca ...


JS 百度地圖路書---動態路線

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>CanvasLayer</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=PlhFWpA02aoURjAOpnWcRGqw7AI8EEyO"></script>
    <script src="dist/js/baiduMap_theame11.js"></script>
    <script type="text/javascript" src="//api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
    <style type="text/css">
        body, html,#container {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}

    </style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
    // 百度地圖API功能
    var SMSS={MAP:{}};
    var map = new BMap.Map("container");
    var point = new BMap.Point(113.290512, 23.161744);
    map.centerAndZoom(point, 15);
    map.enableScrollWheelZoom();
    map.enableKeyboard();
    map.enableDragging();
    map.setMapStyleV2({styleJson: eval("mapStyleBrown")});

    // var bmap = document.getElementById('map');
    // var map = new BMap.Map("map");
    map.enableScrollWheelZoom(true);     //開啟滑鼠滾輪縮放

    // var point = new BMap.Point(108.740663, 34.349856);
    var points = [
        new BMap.Point(108.988452, 34.392405),
        new BMap.Point(108.945046, 34.381442),
        new BMap.Point(108.915438, 34.372742),
        new BMap.Point(108.844579, 34.45817),
        new BMap.Point(108.767253, 34.31628),
        new BMap.Point(108.740663, 34.349856),
        new BMap.Point(108.67268, 34.336861),
        new BMap.Point(108.571351, 34.305735),
        new BMap.Point(108.4946, 34.16431),
        new BMap.Point(108.418136, 34.279728)

    ];
    var markers = [
        points[1],//西安北站
        points[5],//咸陽站
        points[6],//咸陽秦都站
        points[8]//興平站
    ];

    var res=[{"name":"張治","data":[{"lnt":"113.26301056868171","lat":"23.19485870347482","name":"張治","time":"2019-10-24 18:58:18"},{"lnt":"113.26319964784408","lat":"23.19488076852862","name":"張治","time":"2019-10-24 18:55:58"},{"lnt":"113.26055107796319","lat":"23.18579478156154","name":"張治","time":"2019-10-24 18:51:22"},{"lnt":"113.25985808175633","lat":"23.174015272942402","name":"張治","time":"2019-10-24 18:47:34"},{"lnt":"113.26250018628133","lat":"23.162398476601343","name":"張治","time":"2019-10-24 18:42:31"},{"lnt":"113.26350818809335","lat":"23.156314438353892","name":"張治","time":"2019-10-24 18:41:24"},{"lnt":"113.2624431972298","lat":"23.147983884486365","name":"張治","time":"2019-10-24 18:39:55"},{"lnt":"113.27156888625862","lat":"23.141358358023886","name":"張治","time":"2019-10-24 18:38:35"},{"lnt":"113.27798135778723","lat":"23.141047898703256","name":"張治","time":"2019-10-24 18:37:06"},{"lnt":"113.28278862290381","lat":"23.14375038341021","name":"張治","time":"2019-10-24 18:35:54"},{"lnt":"113.28867491709246","lat":"23.14393388103393","name":"張治","time":"2019-10-24 18:35:02"},{"lnt":"113.29784459672659","lat":"23.147476299691487","name":"張治","time":"2019-10-24 18:34:30"},{"lnt":"113.30479025191485","lat":"23.147560867715523","name":"張治","time":"2019-10-24 18:33:30"},{"lnt":"113.30755676324479","lat":"23.141220864808343","name":"張治","time":"2019-10-24 18:31:43"},{"lnt":"113.30773404049656","lat":"23.14056189737672","name":"張治","time":"2019-10-24 18:29:32"},{"lnt":"113.30809754745748","lat":"23.13826959268805","name":"張治","time":"2019-10-24 18:28:55"}]},{"name":"雷志旺","data":[{"lnt":"113.32136690161481","lat":"23.01639497603671","name":"雷志旺","time":"2019-10-24 18:50:18"},{"lnt":"113.31568524579993","lat":"23.12897697325427","name":"雷志旺","time":"2019-10-24 18:06:45"},{"lnt":"113.31456695419409","lat":"23.127133248741277","name":"雷志旺","time":"2019-10-24 17:01:54"}]},{"name":"黃禮雄","data":[{"lnt":"113.38751376407423","lat":"23.016138929773046","name":"黃禮雄","time":"2019-10-24 18:36:26"},{"lnt":"113.3720340960091","lat":"23.050430862696835","name":"黃禮雄","time":"2019-10-24 18:29:31"},{"lnt":"113.37289856283105","lat":"23.067412735688475","name":"黃禮雄","time":"2019-10-24 18:24:31"},{"lnt":"113.38090581633928","lat":"23.094722179111585","name":"黃禮雄","time":"2019-10-24 18:19:21"},{"lnt":"113.38645912603702","lat":"23.114585499845514","name":"黃禮雄","time":"2019-10-24 18:14:01"},{"lnt":"113.34578666049941","lat":"23.121458747863706","name":"黃禮雄","time":"2019-10-24 18:07:39"},{"lnt":"113.31500086203303","lat":"23.121343899870563","name":"黃禮雄","time":"2019-10-24 17:56:18"},{"lnt":"113.31515386577878","lat":"23.123114906453228","name":"黃禮雄","time":"2019-10-24 17:53:25"},{"lnt":"113.31517689500686","lat":"23.124544127910795","name":"黃禮雄","time":"2019-10-24 17:51:34"},{"lnt":"113.31505474603321","lat":"23.12688707816961","name":"黃禮雄","time":"2019-10-24 17:49:17"},{"lnt":"113.3141909551021","lat":"23.126866469570786","name":"黃禮雄","time":"2019-10-24 16:56:28"}]}]
    var ddd=[{"name":"黃禮雄","data":[{"lnt":"113.38751376407423","lat":"23.016138929773046","name":"黃禮雄","time":"2019-10-24 18:36:26"},{"lnt":"113.3720340960091","lat":"23.050430862696835","name":"黃禮雄","time":"2019-10-24 18:29:31"},{"lnt":"113.37289856283105","lat":"23.067412735688475","name":"黃禮雄","time":"2019-10-24 18:24:31"},{"lnt":"113.38090581633928","lat":"23.094722179111585","name":"黃禮雄","time":"2019-10-24 18:19:21"},{"lnt":"113.38645912603702","lat":"23.114585499845514","name":"黃禮雄","time":"2019-10-24 18:14:01"},{"lnt":"113.34578666049941","lat":"23.121458747863706","name":"黃禮雄","time":"2019-10-24 18:07:39"},{"lnt":"113.31500086203303","lat":"23.121343899870563","name":"黃禮雄","time":"2019-10-24 17:56:18"},{"lnt":"113.31515386577878","lat":"23.123114906453228","name":"黃禮雄","time":"2019-10-24 17:53:25"},{"lnt":"113.31517689500686","lat":"23.124544127910795","name":"黃禮雄","time":"2019-10-24 17:51:34"},{"lnt":"113.31505474603321","lat":"23.12688707816961","name":"黃禮雄","time":"2019-10-24 17:49:17"},{"lnt":"113.3141909551021","lat":"23.126866469570786","name":"黃禮雄","time":"2019-10-24 16:56:28"}]}];
    f(point,res,res[0].name)
    f(point,ddd,ddd[0].name)
    function f(Point, res,name) {
        var points=[],markers=[],tips=[];
        res[0].data.reverse()
        res[0].data.forEach(function (item) {
            item.lng=item.lnt;
            points.push(new BMap.Point(item.lnt, item.lat))
            tips.push({lng:item.lng,lat:item.lat,html:item.time,pauseTime:1.5})
        })
        points.forEach(function (item) {
            markers.push(item);
        })

        //用站點畫出路線,參數:站點、線路顏色、線路寬度、透明度
        var polyline = new BMap.Polyline(points, {strokeColor:"#5298ff", strokeWeight:6, strokeOpacity:0.8});

        map.addOverlay(polyline);//添加軌跡到地圖

        var lushu = new BMapLib.LuShu(map, points, {
            //landmarkPois:此參數是路書移動的時候碰到這個點會觸發pauseTime停留中設置的時間,單位為秒,經緯度誤差超過十米不會停止
            landmarkPois:tips,
            defaultContent: name,
            speed: 1500,//速度,單位米每秒
            /* 1、需要把圖片和代碼放在同一個文件夾下麵
             * 2、size()是設置圖片大小,圖片過大可以截取
             * 3、anchor是設置偏移,預設是圖片最中間,設置偏移目的是讓圖片底部中間與坐標重合
             */
            icon: new BMap.Icon('./poscar.png', new BMap.Size(30, 30), {anchor: new BMap.Size(16, 26)}),//聲明高鐵標註
            autoView: false,
            enableRotation: false
        });

        var icon1 = new BMap.Icon('./channel.png', new BMap.Size(22,22),{anchor: new BMap.Size(12, 23)});//聲明站點標註
        for (i=0;i<markers.length;i++){
            map.addOverlay(new BMap.Marker(markers[i],{icon:icon1}));//添加站點marker
        }
        map.centerAndZoom(Point, 14);//設置中心點和級別(級別是1-20)數字越大越是放大

        lushu.start();
    }

    //添加路書點擊事件,並改變其運動速度
    // map.addEventListener('click',startlushu);
    // function startlushu(e){
    //     if (!!e.overlay) {
    //         var markerId = lushu._marker.ba;
    //         if (e.overlay.ba == markerId) {
    //             alert('你點擊了高鐵,速度即將變快');
    //             lushu._opts.speed = lushu._opts.speed+2000;
    //         }
    //     }
    // }
</script>
</body>
</html>

 


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

-Advertisement-
Play Games
更多相關文章
  • JSX語法 1. 如要要使用 JSX 語法,必須先運行 ,然後再 中添加 語法配置; babelrc配置 webpack中配置 2. JSX語法的本質:還是以 React.createElement 的形式來實現的,並沒有直接把 用戶寫的 HTML代碼,渲染到頁面上; 3. 如果要在 JSX 語法內 ...
  • 實現mini版react redux 1. 理解react redux模塊 1). react redux模塊整體是一個對象模塊 2). 包含2個重要屬性: Provider和connect 3). Provider 值: 組件類 作用: 向所有容器子組件提供全局store對象 使用: 4). co ...
  • 實現mini版redux 1. 理解redux模塊 1). redux模塊整體是一個對象模塊 2). 內部包含幾個函數 createStore(reducers) // reducers: function(state, action){ return newState} combineReduce ...
  • React中幾個核心的概念 虛擬DOM(Virtual Document Object Model) + DOM的本質是什麼:就是用JS表示的UI元素 + DOM和虛擬DOM的區別: DOM是由瀏覽器中的JS提供功能,所以我們只能人為的使用 瀏覽器提供的固定的API來操作DOM對象; 虛擬DOM:並 ...
  • JS 百度地圖-右鍵菜單 /* 標註右鍵刪除 */ var markerMenu = new BMap.ContextMenu(); markerMenu.addItem(new BMap.MenuItem('刪除標註 ', function () { map.removeOverlay(marke ...
  • 標題中的 Cascading 亦可以理解為級聯。 進入正文,這是一個很有意思的現象。可以直接跳到 總結一下 部分,看完再回過頭來閱讀本文。 引子 假設我們有如下結構: 上面的 p 標簽只有一個內聯 CSS,很明顯,在沒有其他樣式的干預下,文本 .txt 的顏色肯定就是紅色的。 如果此時,我們希望改變 ...
  • vue項目中可以直接使用 1、常用工具類untils.js中 2、本地存儲工具類storageUntils.js 項目中常用到的一些工具方法,持續更新中。。。 ...
  • ReactJS簡介 + React 起源於 Facebook 的內部項目,因為該公司對市場上所有 JavaScript MVC 框架,都不滿意,就決定自己寫一套,用來架設 Instagram 的網站。做出來以後,發現這套東西很好用, 就在2013年5月開源了 。 + 由於 React 的設計思想極其 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...