路書---動態路線

来源:https://www.cnblogs.com/nelsonlei/archive/2020/05/07/12844500.html
-Advertisement-
Play Games

路書 動態路線 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, ...


路書---動態路線

 

<!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 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();// 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":"111","data":[{"lnt":"113.26301056868171","lat":"23.19485870347482","name":"111","time":"2019-10-24 18:58:18"},{"lnt":"113.26319964784408","lat":"23.19488076852862","name":"111","time":"2019-10-24 18:55:58"},{"lnt":"113.26055107796319","lat":"23.18579478156154","name":"111","time":"2019-10-24 18:51:22"},{"lnt":"113.25985808175633","lat":"23.174015272942402","name":"111","time":"2019-10-24 18:47:34"},{"lnt":"113.26250018628133","lat":"23.162398476601343","name":"111","time":"2019-10-24 18:42:31"},{"lnt":"113.26350818809335","lat":"23.156314438353892","name":"111","time":"2019-10-24 18:41:24"},{"lnt":"113.2624431972298","lat":"23.147983884486365","name":"111","time":"2019-10-24 18:39:55"},{"lnt":"113.27156888625862","lat":"23.141358358023886","name":"111","time":"2019-10-24 18:38:35"},{"lnt":"113.27798135778723","lat":"23.141047898703256","name":"111","time":"2019-10-24 18:37:06"},{"lnt":"113.28278862290381","lat":"23.14375038341021","name":"111","time":"2019-10-24 18:35:54"},{"lnt":"113.28867491709246","lat":"23.14393388103393","name":"111","time":"2019-10-24 18:35:02"},{"lnt":"113.29784459672659","lat":"23.147476299691487","name":"111","time":"2019-10-24 18:34:30"},{"lnt":"113.30479025191485","lat":"23.147560867715523","name":"111","time":"2019-10-24 18:33:30"},{"lnt":"113.30755676324479","lat":"23.141220864808343","name":"111","time":"2019-10-24 18:31:43"},{"lnt":"113.30773404049656","lat":"23.14056189737672","name":"111","time":"2019-10-24 18:29:32"},{"lnt":"113.30809754745748","lat":"23.13826959268805","name":"111","time":"2019-10-24 18:28:55"}]},{"name":"333","data":[{"lnt":"113.32136690161481","lat":"23.01639497603671","name":"333","time":"2019-10-24 18:50:18"},{"lnt":"113.31568524579993","lat":"23.12897697325427","name":"333","time":"2019-10-24 18:06:45"},{"lnt":"113.31456695419409","lat":"23.127133248741277","name":"333","time":"2019-10-24 17:01:54"}]},{"name":"222","data":[{"lnt":"113.38751376407423","lat":"23.016138929773046","name":"222","time":"2019-10-24 18:36:26"},{"lnt":"113.3720340960091","lat":"23.050430862696835","name":"222","time":"2019-10-24 18:29:31"},{"lnt":"113.37289856283105","lat":"23.067412735688475","name":"222","time":"2019-10-24 18:24:31"},{"lnt":"113.38090581633928","lat":"23.094722179111585","name":"222","time":"2019-10-24 18:19:21"},{"lnt":"113.38645912603702","lat":"23.114585499845514","name":"222","time":"2019-10-24 18:14:01"},{"lnt":"113.34578666049941","lat":"23.121458747863706","name":"222","time":"2019-10-24 18:07:39"},{"lnt":"113.31500086203303","lat":"23.121343899870563","name":"222","time":"2019-10-24 17:56:18"},{"lnt":"113.31515386577878","lat":"23.123114906453228","name":"222","time":"2019-10-24 17:53:25"},{"lnt":"113.31517689500686","lat":"23.124544127910795","name":"222","time":"2019-10-24 17:51:34"},{"lnt":"113.31505474603321","lat":"23.12688707816961","name":"222","time":"2019-10-24 17:49:17"},{"lnt":"113.3141909551021","lat":"23.126866469570786","name":"222","time":"2019-10-24 16:56:28"}]}]
    var ddd=[{"name":"222","data":[{"lnt":"113.38751376407423","lat":"23.016138929773046","name":"222","time":"2019-10-24 18:36:26"},{"lnt":"113.3720340960091","lat":"23.050430862696835","name":"222","time":"2019-10-24 18:29:31"},{"lnt":"113.37289856283105","lat":"23.067412735688475","name":"222","time":"2019-10-24 18:24:31"},{"lnt":"113.38090581633928","lat":"23.094722179111585","name":"222","time":"2019-10-24 18:19:21"},{"lnt":"113.38645912603702","lat":"23.114585499845514","name":"222","time":"2019-10-24 18:14:01"},{"lnt":"113.34578666049941","lat":"23.121458747863706","name":"222","time":"2019-10-24 18:07:39"},{"lnt":"113.31500086203303","lat":"23.121343899870563","name":"222","time":"2019-10-24 17:56:18"},{"lnt":"113.31515386577878","lat":"23.123114906453228","name":"222","time":"2019-10-24 17:53:25"},{"lnt":"113.31517689500686","lat":"23.124544127910795","name":"222","time":"2019-10-24 17:51:34"},{"lnt":"113.31505474603321","lat":"23.12688707816961","name":"222","time":"2019-10-24 17:49:17"},{"lnt":"113.3141909551021","lat":"23.126866469570786","name":"222","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
更多相關文章
  • 自己封裝方法，功能跟數組的indexof一樣
    function ArrayIndexOf(arr,value){ // 檢測value在arr中出現的位置 for(var i=0;i<arr.length;i++){ if(arr[i] value){ return i; } } return -1; } var test=ArrayIndex ...
  • 判斷一個字元串是否是可迴文
    // 編寫函數，判斷一個字元串是否是 “可迴文字元串”，如：abccba // 是：true // 不是：false function fn(str){ var center = parseInt(str.length/2); // 4.5 // 4 // 0~4 // 4~length-1 for ...
  • 統計字元出現的次數並去重
    var str = "aabbccehgfhaasdhgfashdfhabcasd"; // 使結果顯示為一個對象，如：{a:2, b:1, c:2, d:1} var obj = {}; // console.log(obj[ "a" ]) // undefined // obj[ "a" ] = ...
  • Vue 動態表格+插入自定義表頭
    Vue 動態表格+插入自定義表頭 <!-- 表格 --> <el-table :data="templateData" style="width: 100%;" stripe ref="templateTable" :empty-text="$t('basic.noData')" @filter-c ...
  • Vue 鉤子函數
    Vue 鉤子函數 Vue.component('Test', { props: { name: String }, template: `<div class="test">{{ name }}</div>`, beforeCreate() { console.log('Test beforeCre ...
  • 結束axios的請求
    結束axios的請求 import axios from 'axios' let axiosSource = axios.CancelToken.source()// 發送請求 axios.get(url, { cancelToken: axiosSource.token }) axios.post ...
  • 弧線.note
    弧線.note 可查看我的有道雲筆記： 文檔：弧線.note鏈接：http://note.youdao.com/noteshare?id=a84aa1c81e9c6e4db547ff908aae2500&sub=44C743397725419886FF4A6902C222BC ...
  • 右鍵菜單
    右鍵菜單 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale= ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類