JS 百度地图路书---动态路线
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>
JS 百度地图路书---动态路线的更多相关文章
- JS 百度地图 地图线路描绘
JS 百度地图 地图线路描绘 <script type="text/javascript" src="http://api.map.baidu.com/api?v= ...
- JS 百度地图 换地图主题颜色（自定义）
JS 百度地图 换地图主题颜色(自定义) 可通过这个在线编辑得到自己想要的主题:https://developer.baidu.com/map/custom/ <div id="all ...
- JS 百度地图 换地图主题颜色（API自带）
JS 百度地图 换地图主题颜色(API自带) <script type="text/javascript" src="http://api.map.baidu.co ...
- JS 百度地图-右键菜单
JS 百度地图-右键菜单 /*-----------------标注右键删除-------------------------*/ var markerMenu = new BMap.ContextM ...
- JS 百度地图导航
上一篇文章中我们就简单的学习了HTML5 地理定位,那么今天告诉大家我在项目中遇到的一个问题吧,就是怎么实现点击一个按钮就可以调到百度地图,并且获取到你当前的位置,并且导航到指定的地方去. 不想看步骤 ...
- js 百度地图和谷歌地图的选择
最近手上接到一个需求: 国外的域名访问,显示谷歌地图 国内的域名访问,显示百度地图 切换中英文的时候,中文->显示百度地图,英文->能显示谷歌地图就显示谷歌地图,不能显示(报错)就显示百度 ...
- js百度地图API创建弧线并修改弧线的弧度
去百度API官网下载CurveLine.min.js,注意复制下来的Js前面的行号要删除. // 百度地图API功能 var map = new BMap.Map("container&qu ...
- js 百度地图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js百度地图-简单的1个坐标点
要学习百度地图,最好的地方就是去看百度地图API: 案例: <!DOCTYPE html> <html> <head> <meta http-equiv=&q ...
随机推荐
- php 安装扩展插件实例-ftp.so
工作记录一下 1.首先进入原始php包安装文件(不是安装后的文件,是下载php安装压缩包,解压后的那个文件)安装包里有个扩展文件夹ext,进入 #cd /home/php-5.3.3/ext/#l ...
- Angular RxJs：针对异步数据流编程工具
一. RxJs:针对异步数据流编程工具 1. 创建subject类对象(发送方) 2. subject.subscribe(观察者); (注册观察者对象observer,可以注册多个相当于回调函数取数 ...
- git rm -r --cached解决已提交的文件在.gitignore中加入忽略后无效的问题。
有时候,发现有不该提交的文件已经提交后,仅仅在.gitignore中加入忽略是不行的.这个时候需要执行: git rm -r --cached 文件/文件夹名字 去掉已经托管的文件,然后重新提交: g ...
- linux中vim常用操作
三种模式 # 命令模式 vim 文件名 # 插入模式 按a/i/o 进行插入模式 按esc 重新进入命令模式 # 编辑模式 按:(冒号)进入编辑模式 插入命令 命令 作用 a 在光标所在字符后插入 A ...
- 记录 2020年2月26日 java的一次远程技术面试
1. 自我介绍 2.String 类型为什么是final类型?String 为啥不可变? String 类型是final类型原因: 1.不可变性支持线程安全(为了线程安全) 2.不可变性支持字符串常量 ...
- iOS 开发技术栈与进阶
最近有一些开发朋友问我应该怎样提升自己的能力,回想起来做了这么久 iOS 开发,我也有过那种“让我做一个功能实现个需求我会做,但接下来怎样提高我不知道.”的时期,这里尝试列一下 iOS 开发的相关技术 ...
- mysql简单备份与恢复
1.备份 mysqldump -u root -h 127.0.0.1 -p --set-gtid-purged=OFF abc > /data/mysqlBak/abc_20200206.s ...
- 剑指offer-面试题63-股票的最大利润-数组
/* 题目: 给定一个股价序列,求一次交易的最大利润. */ #include<iostream> #include<vector> using namespace std; ...
- centos7 字体库。vim乱码
centos7 字体库.vim乱码 windows上传文件到centos,需要先使用dos2unix命令进行格式转换 先查看/usr/share下有没有这两个文件 没有的话yum -y install ...
- Redis常用命令之操作String类型
场景 Centos中Redis的下载编译与安装(超详细): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103967334 Re ...