西藏旅游地图社区

谷歌地图路径回放动画的实现(二)

钱端工程师2018-12-04 14:56:07

因为公司有一些特殊的需求,前几天在做上一个上一个项目的时候,用到了谷歌地图,路径回放这个功能再百度地图和高德地图是有API直接可以使用的,奈何公司领导只让用谷歌地图,搜索发现网上并无多少相关文章,所以我把我在开发过程中遇到的问题记录下来,希望能够帮助大家。我的可能不是最优解决方案,仅供大家参考!

       第二个遇到问题就是,两点之间的路径如果已经实现,或者动画效果也已经实现,但是领导需要在绘制动画时加一个箭头,根据当时汽车真实方向地图上箭头指向对应方向。

        首先需要在每个地点记录的数据中,有一个真实方向角度的字段。

        因为谷歌地图没有直接可以使用的API,我是用过一个 marker 根据当时的路径动画同步前进,不断变换位置实现的,使用八张图片,在每次绘制出marker的时候做做判断,然后生成对应角度的箭头图片,并且把上一个绘制的图标删除,代码如下:

        假设按钮为:<div class="top_btn1">开始回放</div>

        //声明一个计数变量

        var marker_count = 1;

        //声明两个变量用来存储时间循环
        var begin_marker;

        //点击开始回放按钮
        $('.top_btn1').on('click', function() {
          if ($('.top_btn1').text() == '开始回放') {
              //时间循环控制速度,go_marker函数每次绘制marker生成对应图片,200为一秒五次,可以使用一个变量来控制速度
              begin_marker= setInterval(go_marker, 200);
              $('.top_btn1').text('暂停回放');
          } else {
              //暂定时间循环
              clearInterval(begin_marker);
              $('.top_btn1').text('开始回放');
          }
         });

        //初始化箭头显示的数组
        let marker0 = new google.maps.Marker({
          position: my_trip[0],
          icon: '/RoadGPS/images/arrow_n.png'

        });

        let marker_arr = [marker0];
        //控制箭头根据角度变化来显示不同的图片
        function go_marker() {
          //根据实际行走方向的角度判断显示不同方向的箭头图片
          let img;
          if (jsonData[markerCount].azimuth <= 22 || jsonData[markerCount].azimuth >= 337) {
            img = '/RoadGPS/images/arrow_n.png';
          } else if (jsonData[markerCount].azimuth > 22 && jsonData[markerCount].azimuth <= 67) {
            img = '/RoadGPS/images/arrow_en.png';
          } else if (jsonData[markerCount].azimuth > 67 && jsonData[markerCount].azimuth <= 112) {
            img = '/RoadGPS/images/arrow_e.png';
          } else if (jsonData[markerCount].azimuth > 112 && jsonData[markerCount].azimuth <= 157) {
            img = '/RoadGPS/images/arrow_es.png';
          } else if (jsonData[markerCount].azimuth > 157 && jsonData[markerCount].azimuth <= 202) {
            img = '/RoadGPS/images/arrow_s.png';
          } else if (jsonData[markerCount].azimuth > 202 && jsonData[markerCount].azimuth <= 247) {
            img = '/RoadGPS/images/arrow_ws.png';
          } else if (jsonData[markerCount].azimuth > 247 && jsonData[markerCount].azimuth <= 292) {
            img = '/RoadGPS/images/arrow_w.png';
          } else if (jsonData[markerCount].azimuth > 292 && jsonData[markerCount].azimuth <= 337) {
            img = '/RoadGPS/images/arrow_wn.png';
          }
          //新增一个当前的marker,推入数组以后,进行绘画
          let marker1 = new google.maps.Marker({
            position: my_trip[marker_count],
            icon: img
          });
          marker_arr.push(marker1);
          marker_arr[1].setMap(map);
          //对上一个marker删除,延迟20ms防止箭头闪动
          setTimeout(function() {
            marker_arr[0].setMap(null);
            //对已经删除了的marker从数组中删除
            marker_arr.shift();
          }, 20)
          //marker计数加一
          marker_count++;

        }

        以下为我使用的样图,需要注意的是,这个速度不能太快,不然会造成图片消失的bug,因为每次图片都在生成。


但是绘制路径的时候不能跟随显示一个提示窗,看每个点的具体信息,若有需求,请看:

谷歌地图路径回放动画的实现(三)

https://blog.csdn.net/weixin_42063071/article/details/80564492


另外我建了一个公众号,会不时分享前端的一些技术,或者遇到的难题和解决办法,欢迎大家关注。

搜索:钱端工程师       或        Money-end-engineer