原生JS以及JQuery实现信息动态播放

原生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