谷歌地圖路徑回放動畫的實現(三)
因為公司有一些特殊的需求,前幾天在做上一個上一個專案的時候,用到了谷歌地圖,路徑回放這個功能再百度地圖和高德地圖是有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 或 掃描下方圖片