因為公司有一些特殊的需求，前幾天在做上一個上一個專案的時候，用到了谷歌地圖，路徑回放這個功能再百度地圖和高德地圖是有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.csdn.net/weixin_42063071/article/details/80569773

另外我建了一個公眾號，會不時分享前端的一些技術，或者遇到的難題和解決辦法，歡迎大家關注。

搜尋：錢端工程師       或        Money-end-engineer      或       掃描下方圖片