谷歌地图路径回放动画的实现（三）

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

       第三个遇到的问题是，能够跟随路径的绘制，有一个信息窗口跟随移动，显示当时位置的一些信息。

        我使用的方法是，在之前代码的基础上，新建立一个marker点，然后使用一个 icon 为1px*1px的小黑但图片，基本可以忽略不记，视觉效果上看不见，在marker上建立对应的 InfoWindow 然后每次移动 marker ，InfoWindow自然会跟随着移动，代码如下：

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

        //显示一个小黑点marker用来放置跟随移动的infoWindow
        var marker_black = new google.maps.Marker({
          position: my_trip[0],
          icon: '/RoadGPS/images/arrow_black.jpg'
        });
        marker_black.setMap(map);
        //定义跟随小黑点的infoWindow
        blackInfoWindow = new google.maps.InfoWindow({
          content: "设备号:" + jsonData[0].imei +
            "</br>时间:" + jsonData[0].receivetime +
            "</br>速度:" + jsonData[0].speed + '公里/小时',
          //控制信息窗口相对于小黑点的位置
          pixelOffset: new google.maps.Size(0, -20),

        });

        //点击开始回放按钮
        $('.top_btn1').on('click', function() {
          if ($('.top_btn1').text() == '开始回放') {
            //点击显示详细信息
            blackInfoWindow.open(map, markerBlack);
            $('.top_btn1').text('暂停回放');
          } else {
            //关闭小黑点显示的信息
            blackInfoWindow.close(map, markerBlack);
            $('.top_btn1').text('开始回放');
          }

        });

        

         //根据当前回访路径移动小黑点的位置,这一句是改变小黑点的位置，可以放到第一篇文章的go函数里，

          markerBlack.setPosition(myTrip[tripCount]);

           //重置移动的内容
          let content = "设备号:" + jsonData[0].imei +
            "</br>时间:" + jsonData[tripCount].receivetime +
            "</br>速度:" + jsonData[tripCount].speed + '公里/小时'

          blackInfoWindow.setContent(content);

         //不过在移动完毕时可以做一个判断，我进行的操作时，刷新页面，

        //对回访路径进度进行判断，如果路径回放完毕，刷新页面
          if (tripCount == myTrip.length) {
            window.location.reload();
          }

如图：

这些做完以后，又添加了一个功能，就是控制箭头移动速度的，根据一个滑杆效果，若有需求，请看：

CSS实现自定义滑杆插件，可以动态改变数值

https://blog.****.net/weixin_42063071/article/details/80569773

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

搜索：钱端工程师       或        Money-end-engineer      或       扫描下方图片