JS 百度地图路书---动态路线

  1. <!DOCTYPE html>
  2. <head>
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  5.     <title>CanvasLayer</title>
  6.     <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=PlhFWpA02aoURjAOpnWcRGqw7AI8EEyO"></script>
  7.     <script src="dist/js/baiduMap_theame11.js"></script>
  8.     <script type="text/javascript" src="//api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
  9.     <style type="text/css">
  10.         body, html,#container {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
  11.  
  12.     </style>
  13. </head>
  14. <body>
  15. <div id="container"></div>
  16. <script type="text/javascript">
  17.     // 百度地图API功能
  18.     var SMSS={MAP:{}};
  19.     var map = new BMap.Map("container");
  20.     var point = new BMap.Point(113.290512, 23.161744);
  21.     map.centerAndZoom(point, 15);
  22.     map.enableScrollWheelZoom();
  23.     map.enableKeyboard();
  24.     map.enableDragging();
  25.     map.setMapStyleV2({styleJson: eval("mapStyleBrown")});
  26.  
  27.     // var bmap = document.getElementById('map');
  28.     // var map = new BMap.Map("map");
  29.     map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
  30.  
  31.     // var point = new BMap.Point(108.740663, 34.349856);
  32.     var points = [
  33.         new BMap.Point(108.988452, 34.392405),
  34.         new BMap.Point(108.945046, 34.381442),
  35.         new BMap.Point(108.915438, 34.372742),
  36.         new BMap.Point(108.844579, 34.45817),
  37.         new BMap.Point(108.767253, 34.31628),
  38.         new BMap.Point(108.740663, 34.349856),
  39.         new BMap.Point(108.67268, 34.336861),
  40.         new BMap.Point(108.571351, 34.305735),
  41.         new BMap.Point(108.4946, 34.16431),
  42.         new BMap.Point(108.418136, 34.279728)
  43.  
  44.     ];
  45.     var markers = [
  46.         points[1],//西安北站
  47.         points[5],//咸阳站
  48.         points[6],//咸阳秦都站
  49.         points[8]//兴平站
  50.     ];
  51.  
  52.     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"}]}]
  53.     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"}]}];
  54.     f(point,res,res[0].name)
  55.     f(point,ddd,ddd[0].name)
  56.     function f(Point, res,name) {
  57.         var points=[],markers=[],tips=[];
  58.         res[0].data.reverse()
  59.         res[0].data.forEach(function (item) {
  60.             item.lng=item.lnt;
  61.             points.push(new BMap.Point(item.lnt, item.lat))
  62.             tips.push({lng:item.lng,lat:item.lat,html:item.time,pauseTime:1.5})
  63.         })
  64.         points.forEach(function (item) {
  65.             markers.push(item);
  66.         })
  67.  
  68.         //用站点画出路线，参数：站点、线路颜色、线路宽度、透明度
  69.         var polyline = new BMap.Polyline(points, {strokeColor:"#5298ff", strokeWeight:6, strokeOpacity:0.8});
  70.  
  71.         map.addOverlay(polyline);//添加轨迹到地图
  72.  
  73.         var lushu = new BMapLib.LuShu(map, points, {
  74.             //landmarkPois:此参数是路书移动的时候碰到这个点会触发pauseTime停留中设置的时间，单位为秒，经纬度误差超过十米不会停止
  75.             landmarkPois:tips,
  76.             defaultContent: name,
  77.             speed: 1500,//速度，单位米每秒
  78.             /* 1、需要把图片和代码放在同一个文件夹下面
  79.              * 2、size()是设置图片大小，图片过大可以截取
  80.              * 3、anchor是设置偏移，默认是图片最中间，设置偏移目的是让图片底部中间与坐标重合
  81.              */
  82.             icon: new BMap.Icon('./poscar.png', new BMap.Size(30, 30), {anchor: new BMap.Size(16, 26)}),//声明高铁标注
  83.             autoView: false,
  84.             enableRotation: false
  85.         });
  86.  
  87.         var icon1 = new BMap.Icon('./channel.png', new BMap.Size(22,22),{anchor: new BMap.Size(12, 23)});//声明站点标注
  88.         for (i=0;i<markers.length;i++){
  89.             map.addOverlay(new BMap.Marker(markers[i],{icon:icon1}));//添加站点marker
  90.         }
  91.         map.centerAndZoom(Point, 14);//设置中心点和级别（级别是1-20）数字越大越是放大
  92.  
  93.         lushu.start();
  94.     }
  95.  
  96.     //添加路书点击事件，并改变其运动速度
  97.     // map.addEventListener('click',startlushu);
  98.     // function startlushu(e){
  99.     //     if (!!e.overlay) {
  100.     //         var markerId = lushu._marker.ba;
  101.     //         if (e.overlay.ba == markerId) {
  102.     //             alert('你点击了高铁，速度即将变快');
  103.     //             lushu._opts.speed = lushu._opts.speed+2000;
  104.     //         }
  105.     //     }
  106.     // }
  107. </script>
  108. </body>
  109. </html>

JS 百度地图路书---动态路线的更多相关文章

  1. JS 百度地图 地图线路描绘

    JS 百度地图 地图线路描绘 <script type="text/javascript" src="http://api.map.baidu.com/api?v= ...

  2. JS 百度地图 换地图主题颜色（自定义）

    JS 百度地图 换地图主题颜色(自定义) 可通过这个在线编辑得到自己想要的主题:https://developer.baidu.com/map/custom/ <div id="all ...

  3. JS 百度地图 换地图主题颜色（API自带）

    JS 百度地图 换地图主题颜色(API自带) <script type="text/javascript" src="http://api.map.baidu.co ...

  4. JS 百度地图-右键菜单

    JS 百度地图-右键菜单 /*-----------------标注右键删除-------------------------*/ var markerMenu = new BMap.ContextM ...

  5. JS 百度地图导航

    上一篇文章中我们就简单的学习了HTML5 地理定位,那么今天告诉大家我在项目中遇到的一个问题吧,就是怎么实现点击一个按钮就可以调到百度地图,并且获取到你当前的位置,并且导航到指定的地方去. 不想看步骤 ...

  6. js 百度地图和谷歌地图的选择

    最近手上接到一个需求: 国外的域名访问,显示谷歌地图 国内的域名访问,显示百度地图 切换中英文的时候,中文->显示百度地图,英文->能显示谷歌地图就显示谷歌地图,不能显示(报错)就显示百度 ...

  7. js百度地图API创建弧线并修改弧线的弧度

    去百度API官网下载CurveLine.min.js,注意复制下来的Js前面的行号要删除. // 百度地图API功能 var map = new BMap.Map("container&qu ...

  8. js 百度地图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. js百度地图-简单的1个坐标点

    要学习百度地图,最好的地方就是去看百度地图API: 案例: <!DOCTYPE html> <html> <head> <meta http-equiv=&q ...

随机推荐

  1. HDU 4994 博弈。

    F - 6 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Status ...

  2. 响应式Web设计：构建令人赞叹的Web应用程序的秘诀

    骨架屏(Skeleton Screen) 参考博客:https://medium.com/@owencm/reactive-web-design-the-secret-to-building-web- ...

  3. 11种常用css样式之background学习

    background如何简写?如何在背景图像不变的情况下,依旧实现页面文字滚动,为之奈何?别担心,快用background-attachment: fixed;/*固定定位*/常用的backgroun ...

  4. Ubuntu18.04下配置深度学习开发环境

    在Ubuntu18.04下配置深度学习/机器学习开发环境 1.下载并安装Anaconda 下载地址:https://www.anaconda.com/distribution/#linux 安装步骤: ...

  5. app简单压力测试

    step1:手机开发者选项中,将USB调试选上 step2:确认手机和电脑已经连接成功:adb devices step3:安装测试app:adb install package.apk (1)cd命 ...

  6. Elasticsearch客户端源码剖析

    注:本文出自博主 Chloneda:个人博客 | 博客园 | Github | Gitee | 知乎 注:本文源链接:https://www.cnblogs.com/chloneda/p/es-cli ...

  7. 前后端分离-crud&svn

    前后端分离-crud&svn 1. 跨域 1.1 什么是跨域 请求方与服务方的源不同,即跨域,包括: 1. 协议不同 2. 域名不同 3. 端口不同 1.2 跨域不一定存在跨域问题 什么情况下 ...

  8. 面向对象编程（什么是对象）——java

    一.什么是面向对象,什么是面向过 二.引入对象和类的概念 对象:是具体事物 如:小明 汽车 类: 是对对象的抽象(抽象 抽出象的部分) Person 先有具体的对象,然后抽象各个对象之间的部分,归纳出 ...

  9. 开启WIndows10 未经身份验证的来宾访问策略以及SMB1

    打开记事本编辑保存至.vbs 以管理员身份运行 Set obj = createobject("wscript.shell") obj.run ("reg add HKL ...

  10. css3基础-动画案例（没啥实用性，纯粹好玩的）

    会动的汉克狗: <!doctype html> <html lang="en"> <head> <meta charset="U ...