原生JS以及JQuery实现信息动态播放
元旦假期赶项目,真刺激!!!
上次国庆期间也“加班”,用BingMap画图(详情见JS画地图–BingMap)。这次比上次的麻烦一点,需要的功能也多了起来。废话不多说,直接开始,Let’s go!
1.项目需求
项目需求是每个项目开始前必须要熟知的一点,这次项目就有以下几点要求:
- 利用javascript在H5页面渲染地图,地图为英文版
- 地图上添加四个标记点,分别坐落于4个不同的位置
- 每个标记点对应一个提示框,提示框里会有数据展示
- 数据是按照时间变化的,所以再需要一个时间轴实现数据轮播
需求提完了,就要开始着手准备实现了。
2.项目规划(项目设计)
需求已经提出来了,如何实现,用什么技术,什么工具实现,效果图应该是什么样的,都应该规划好。
- 关于英文地图渲染,JS画地图–BingMap这里介绍了,使用BingMap WEB API就好了
- 4个坐标对应不同标记点,每个标记点对应一个提示框,提示框有关闭按钮,可以实现关闭功能。关闭后,点击标记点,可以再次展示提示框。这些通通可以使用BingMap WEB API以及JS技术来实现
- 时间轴动态播放,定时器定时,一段时间播放一个时间点数据,同时根据时间点数据变化,再变换提示框里数据,这里使用原生JS以及JQuery实现。
最难的是时间轴动态播放,因为源数据的时间字段并不是连续的,这一下子将难度提高了一倍。
3.代码编写
这里省去了处理数据的步骤,一般的话我比较习惯,等先把静态资源渲染完,再去处理数据。
-
前面两点,地图渲染和标记以及提示框,就不细说了。这里主要记录一个记忆点。
//Attention!!! Microsoft.Maps.Location(lat, lon),latitude first,then the longitude var point1 = new Microsoft.Maps.Location(30.581084, 114.3162); //武汉市 ...
上篇地图渲染也记录过了,
BingMap与Supermap不同,它先纬度后经度。
画地图,做标记,各城市坐标肯定是需要的。这里附上百度提供的各省市坐标文件。链接:https://pan.baidu.com/s/1uwUG7Rm619Lt-xyRN_GY1w
提取码:r6wd再附上一个工具网址,http://epsg.io/ ,该网站可以进行不同地图坐标系的坐标进行转换。
-
使用api渲染地图成功后会发现,地图上会有一些logo,这时候就需要自己手动消除了。使用浏览器自带的控制台,找到不必要的元素,设置其样式为不可见即可。这里再记录一个点:
h5:
<div class="btn-control btn-play" onclick="btnControl()"></div>
css:
/*纯css完成'√','×',暂停以及播放按钮*/ .btn-control { width: 34px; height: 34px; margin-bottom: 16px; cursor: pointer; background-color: #fff; position: absolute; right: 30px; top: 192px; border: 1.5px solid #444444; border-radius: 50%; } /*按钮样式*/ .btn-play:before { display: block; content: ''; width: 0; height: 0; border-style: solid; border-width: 14px 0 14px 19px; border-color: transparent transparent transparent black; margin: 3px 0 0 10px; } /*点击之前显示暂停*/ .btn-pause:after