地图上制作线路的动画_使用百度地图API制作线路轨迹播放
1.使用百度地图API制作轨迹播放;
可应用于车辆跟踪、行驶线路回放、跑步行程的记录等地图应用场景,
1.1绘制静态轨迹图
获取多个轨迹点point(必须包含经度、纬度)
使用polyline对象依次连接相邻的2个点(注意polyline的个数比point的少1)
1.2绘制动态轨迹图(固定间隔时间)
每隔500毫秒读取一个轨迹点,实现a,b两个功能
a增加一条polyline
b将marker从先前的point移到当前点
主方法使用setTimeout方法迭代来实现动态循环
Polyline在每条迭代循环体中添加即可,marker的移动则可以通过2中方法来实现:
一、使用removeOverlay除去原marker并在当前point处添加新marker
这是当时做项目时想到的方法,由于先前绘制polyline时使用addOverlay的思维惯性,在绘制marker时也就继续使用了addOverlay做循环迭代。
window.run = function (){
var pts ={?????}//你获取到的一系列点的数组(通过gps或其他接口)
var paths = pts.length; //获得有几个点
var carMk = new BMap.Marker(pts[0],{icon:myIcon});
map.addOverlay(carMk);
i=0;
function removeMkPoint(i){
if(i < paths){//
setTimeout(function(){
i++;
map.removeOverlay(carMk);//清除前一个marker
removeMkPoint(i);
},100);
}
}
setTimeout(function(){
resetMkPoint(5);
},100)
});
}
setTimeout(function(){
run();
},1500);
二、使用marker的setPosition方法重新设置marker的位置
在项目完成后,我又读了一篇百度api的文档,发现官方demo中使用setPosition方法能很好地实现marker的移动功能
window.run = function (){
var pts ={?????}//你获取到的一系列点的数组(通过gps或其他接口)
var paths = pts.length; //获得有几个点
var carMk = new BMap.Marker(pts[0],{icon:myIcon});
map.addOverlay(carMk);
i=0;
function resetMkPoint(i){
carMk.setPosition(pts[i]);//重新设置marker的position
if(i < paths){
setTimeout(function(){
i++;
resetMkPoint(i);
},100);
}
}
setTimeout(function(){
resetMkPoint(5);
},100)
});
}
setTimeout(function(){
run();
},1500);
注意:marker的opts属性能自定义marker的icon(汽车、人等图标)、旋转方向、大小、偏移等等属性,另外setAnimation方法还能设置动画效果。
1.3绘制polyline
轨迹线路是由一个一个polyline首尾相连组合起来的,因此,只需要在每次添加marker时添加一个polyline即可,并且在下一轮迭代循环中不需要清除,每条polyline的首尾2个端点就是当前点和上一个时间段的点
var pts0,前一个点 var pts1当前点
var carPl=new BMap.Polyline([pts0,pts1],{strokeColor:'blue',strokeWeight:4,strokeOpacity:0.8});
map.addOverlay(carPl);
pts0=pts1;//每次添加polyline后当前点变为前一个点
1.4添加播放按钮控件控制轨迹播放
添加自定义的播放控件,这里需要使用prototype属性来返回对象类型原型的引用, 这里给出prototype的理解
例如:A.prototype = new B();
理解prototype不应把它和继承混淆。A的prototype为B的一个实例,可以理解A将B中的方法和属性全部克隆了一遍。这里强调的是克隆而不是继承,其区别在于:A的prototype是B的实例,同时B的prototype也可能是A的实例。
A能使用B的方法和属性,当A、B中都有方法名为f的方法时,A的实例instance调用这个f方法(instance.f)会是A自生的f方法而不是B的f方法,如果A的实例instance想调用B的f方法,需要使用call方法来实现:先new一个B的实例var Binstance=new B(); Binstance.f.call(instance);
function PlayControl(){
// 默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_BOTTOM_RIGHT;
this.defaultOffset = new BMap.Size(10, 40);
}
// 通过JavaScript的prototype属性继承于BMap.Control
PlayControl.prototype = new BMap.Control();
// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
// 在本方法中创建个input元素作为控件的容器,并将其添加到地图容器中
PlayControl.prototype.initialize = function(map){
// 创建一个DOM元素
var input = document.createElement("input");
input.id="playCtrl";
input.type="image";
input.src="data:image/play.png";
input.οnclick=startPlay();//startPlay为上一步开始执行setTimeout迭代
};
// 添加DOM元素到地图中
map.getContainer().appendChild(input);
// 将DOM元素返回
return input;
};
// 创建控件
var myPlayCtrl = new PlayControl();
// 添加到地图当中
map.addControl(myPlayCtrl);
1.5将播放按钮设计为可以单击切换播放和停止的按钮
定义一个变量var i=0,在onclick事件触发时,将i在0和1之间不停切换,根据i的值来判断执行开始播放方法和停止方法。
停止播放方法可以通过clearTimeout(timer)来实现(前提是在前面的开始播放方法中将setTimeout语句作为字符串赋值为timer),并使用removeOverlay来清除播放过程中出现的痕迹。
input.οnclick=function(){
if(i==0){
startPlay();//播放开始
input.src="data:image/pause.png";
i=1;
}else{
pausePlay();//播放停止
input.src="data:image/play.png";
i=0;
}
};
1.6添加播放速度控件
上一步添加了播放开关,还可以在此基础上添加播放速度的控件来调节播放的快慢
其方法与1.4中添加播放开关的方法类似,其中input的type为range(html 5中新的类型),通过读取range 的value,将value作为setTimeout的时间参数(作为参数传入播放方法),
注意:当滑动range,value发生改变时,要使播放停止,再次点击播放按钮时,播放方法读取新的value;
input.id="speedCtrl";
input.type="range";
input.max="1750";
input.min="250";
input.step="250";
input.value="1000";
var i=0;
input.οnchange=function(){
pausePlay();
}
总结:
作为一个从学校里刚走出来的非计算机专业的前端新手,实习中的第一次上手项目,就有独立使用百度地图API的机会实在幸运。从百度地图API的具体使用实践中,我学到了很多,除了百度地图API以外,还学到了包括prototype、bootstrap(模态框、datetimepicker、validation等插件)等等。
尽管有些不太完善的地方(例如:在infoWindow的content中不能使用bootstrap的模态框等),但百度地图API的功能仍然十分强大,值得广大新手学习。特别是随着移动互联网的快速发展以及各种带有gps定位功能的智能设备的爆发式普及,地图、定位类使用场景越来越多,地图API的使用需求也将越来越多。
为了更好地练习百度地图,我打算利用节假日空闲的时间使用百度地图制作一个小游戏练手,游戏大致构思如下:(未来会在博客中向大家展示!)
1.使用自定义marker作为游戏主角
2.使用自定义控件来操作主角
3.设置关卡或任务,
4.计算奖励或得分
5.设置障碍
先实现这几个初级功能需求,就可以使自己的游戏主角在自己的城市中行走了!
地图上制作线路的动画_使用百度地图API制作线路轨迹播放相关推荐
- 获取百度地图上某点的经纬度信息(百度地图拾取坐标系统)
百度地图拾取坐标系统 的地址:http://api.map.baidu.com/lbsapi/getpoint/index.html
- python批量爬取小网格区域坐标系_Python爬虫实例_利用百度地图API批量获取城市所有的POI点...
上篇关于爬虫的文章,我们讲解了如何运用Python的requests及BeautifuiSoup模块来完成静态网页的爬取,总结过程,网页爬虫本质就两步: 1.设置请求参数(url,headers,co ...
- 前端vue js 高德地图实现雷达扫描加载,借鉴百度地图等方法,采用Canvas解决雷达背景透明度问题,解决Canvas动态指针扫描造成浏览器卡顿问题
前端vue js 高德地图实现雷达扫描加载,借鉴百度地图等方法,采用Canvas解决雷达背景透明度问题,解决Canvas动态指针扫描造成浏览器卡顿问题 经过3天的尝试,借鉴了好几个博客的思路,开发了一 ...
- 【新手】基于C++Qt5通过调用百度翻译API制作简易翻译工具
基于C++Qt5通过调用百度翻译API制作简易翻译工具 目录 基于C++Qt5通过调用百度翻译API制作简易翻译工具 写在前面 步骤: 1.注册百度翻译开放平台账号并开通翻译服务 2.下载安装Qt5和 ...
- python 地图偏移_python 地图经纬度转换、纠偏的实例代码 百度地图经纬度web纠偏怎么用...
天地图的经纬度 经过纠偏了么 给个例子证明下 如何用python实现百度地图墨卡托坐标跟经纬度坐标互转 麦哲伦机器: 系统设置 地图单位 自定义坐标系 横向墨卡托 原点纬度0 原点经度126(通化) ...
- python+百度翻译api制作中英文互转的代码应用实例
本篇文章主要讲解,python+百度翻译api制作中英文互转的代码应用实例 作者:任聪聪 前提准备 1.python 3.9版本 2.注册百度翻译开发者 地址:https://fanyi-api.ba ...
- 地图上制作线路的动画_纯干货:动画制作的十二个法则(上)
制作动画的十二个原则,不论是3D动画还是flash还是AE都适用. 首先先找到十二个妹子,演示用. 一:挤压与拉伸 通过挤压与拉伸赋予物体或角色弹性,使其更加灵动. 左为使用该原则的例子,右为对比. ...
- 地图上制作线路的动画_魔兽争霸重制版不只是表面上这么简单,新版编辑器制作地图更容易...
对于许多玩家来说,魔兽争霸绝对是一款信仰级别的游戏,它曾经陪伴我们度过了许多难忘的美好时光,但是对于许多地图开发制作者来说,这个游戏更像是自己的信仰.魔兽一个游戏所衍生出的RPG地图,让许多玩家从中收 ...
- java百度地图添加标注_调取百度地图接口,实现取自己的实时位置,然后可以在百度地图上添加信息标注...
前几天接了一个小项目,就是有关百度地图的,和我的上一篇不一样,上一篇是复制人家的源代码是把东西写死了的,这次的比较有难度,要调取他的接口,用js来实现. 下面我先说一下主要实现的功能,和要实现的页面 ...
最新文章
- 使用osql.exe, 将Select的内容保存为文件
- django中使用POST方法 获取POST数据
- 龙卷风优化软件测试面试题,暑X好物大推荐,最强真无线降噪耳机带你开启夏日解压模式...
- 安装jdk步骤rpm_jenkins rpm包方式安装
- oracle 地市 区县分组,oracle分组写法 - 挣扎在陌生城市ITMAN的个人空间 - OSCHINA - 中文开源技术交流社区...
- 鸿蒙os 2.0跑分,预装鸿蒙 OS 2.0!华为 MatePad Pro2 跑分曝光:麒麟 9000、8GB 内存
- Parallels Desktop 16 升级 macOS Big Sur 无法联网解决方法
- 使用 Android 开发 MQTT 客户端
- C++---常用printf输出格式
- 快速排序(java实现)
- 365地图java_中国气候区划在线地图(1:3200万)
- 新猿木子李:0基础学python培训教程 Python操作Redis之有序集合
- 使用PyTorch实现手写文字识别的学习
- 告别无聊的log:让你的Logcat 输出多彩日志
- Geospark电火花使用再记录
- Android ImageView: resolveUri failed on bad bitmap uri
- 迎接2012新赛季——HDOJ系列热身赛(4)部分结题报告
- openstack-创建多网络虚机
- activiti——结束事件
- 【亲测可用】经验分享,开发在线考试平台(类似问卷星、考试星、阿里巴巴在线考试、易考通、考试云、移动网大、移动网校、中石化网络学院、宝武微学院、iTEST等)如何用程序代码防止学生作弊?
热门文章
- 【腾讯Bugly干货分享】腾讯验证码的十二年
- 【050】SylixOS全面支持C-SKY系列处理器
- python云图_python聚合云图
- jdk1.8新特性:stream流 报错:stream has already been operated upon or closed
- 2019拼多多前端笔试题
- WebSocket通讯C#实例
- 简单易懂的英语学习思维导图(学习篇)
- vagrant给vmbox创建虚拟机及docker安装mysql和redis
- html5+ mui框架 微信授权登录无响应,不回跳APP
- java上GUI表格按钮_Java swing选项卡中有表格,表格中有按钮,按钮按不到