谷歌地圖路徑回放動畫的實現（總結）
阿新 • • 發佈：2019-02-08
//宣告兩個計數變數，分別為路徑的標記的計數
var tripCount = 1, markerCount = 1;
//宣告兩個變數用來儲存時間迴圈
var begin,beginmarker;
//預設顯示一個藍色路徑
flightPath1 = new google.maps.Polyline({//建立線性疊加層物件
path:myTrip,//路徑
strokeColor:polyLineColor[0],//線條顏色
strokeOpacity:0.8,//線條透明度
strokeWeight:2,//線條寬度
});
flightPath1.setMap(map);
//顯示一個小黑點marker用來放置跟隨移動的infoWindow
var markerBlack = new google.maps.Marker({
position: myTrip[0],
icon: '/RoadGPS/images/arrow_black.jpg'
});
markerBlack.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),
});
//定義滑竿 監聽動畫運動的函式
function rangeValue(){
//把input的值變為正數
var newSpeed = Math.abs(elem.value);
//清除原有的時間迴圈
clearInterval(begin);
clearInterval(beginmarker);
//時間迴圈控制速度，go函式是綠色路徑的繪製
begin = setInterval(go, newSpeed);
//時間迴圈控制速度，gomarer函式是綠色箭頭跟隨路徑運動
beginmarker = setInterval(gomarker, newSpeed);
}
//點選開始回放按鈕
$('.top_btn1').on('click',function(){
if($('.top_btn1').text() == '開始回放'){
//對input滑竿進行監聽事件，開始動畫
elem.addEventListener("input", rangeValue);
//獲取滑竿的預設速度
rangeValue();
//點選顯示詳細資訊
blackInfoWindow.open(map, markerBlack);
$('.top_btn1').text('暫停回放');
}else{
//暫定時間迴圈
clearInterval(begin);
clearInterval(beginmarker);
//關閉小黑點顯示的資訊
blackInfoWindow.close(map, markerBlack);
$('.top_btn1').text('開始回放');
//移出對滑竿input的監聽
elem.removeEventListener("input", rangeValue);
}
});
//點選重新整理頁面，展示預設軌跡
$('.top_btn2').on('click',function () {
window.location.reload();
});
//回放路徑執行的函式
function go() {
//根據計數當前進度擷取myTrip陣列
let myTrips = myTrip.slice(0,tripCount);
//畫出回放(綠色)路徑
flightPath=new google.maps.Polyline({//建立線性疊加層物件
path:myTrips,//路徑
strokeColor:polyLineColor[1],//線條顏色
strokeOpacity:0.8,//線條透明度
strokeWeight:3,//線條寬度
});
flightPath.setMap(map);
//根據當前回訪路徑移動小黑點的位置
markerBlack.setPosition(myTrip[tripCount]);
//重置移動的內容
let content = "裝置號:"+jsonData[0].imei+
"</br>時間:"+jsonData[tripCount].receivetime+
"</br>速度:"+jsonData[tripCount].speed + '公里/小時'
blackInfoWindow.setContent(content);
//進度加一
tripCount++;
//對回訪路徑進度進行判斷，如果路徑回放完畢，重新整理頁面
if(tripCount==myTrip.length){
window.location.reload();
}
}
//初始化箭頭顯示的陣列
let marker0 = new google.maps.Marker({
position: myTrip[0],
icon: '/RoadGPS/images/jiantou.png'
});
let markerArr = [marker0];
//控制箭頭根據角度變化來顯示不同的圖片
function gomarker() {
//根據實際行走方向的角度判斷顯示不同方向的箭頭圖片
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: myTrip[markerCount],
icon: img
});
markerArr.push(marker1);
markerArr[1].setMap(map);
//對上一個marker刪除，延遲20ms防止箭頭閃動
setTimeout(function(){
markerArr[0].setMap(null);
//對已經刪除了的marker從陣列中刪除
markerArr.shift();
},20)
//marker計數加一
markerCount++;
var tripCount = 1, markerCount = 1;
//宣告兩個變數用來儲存時間迴圈
var begin,beginmarker;
//預設顯示一個藍色路徑
flightPath1 = new google.maps.Polyline({//建立線性疊加層物件
path:myTrip,//路徑
strokeColor:polyLineColor[0],//線條顏色
strokeOpacity:0.8,//線條透明度
strokeWeight:2,//線條寬度
});
flightPath1.setMap(map);
//顯示一個小黑點marker用來放置跟隨移動的infoWindow
var markerBlack = new google.maps.Marker({
position: myTrip[0],
icon: '/RoadGPS/images/arrow_black.jpg'
});
markerBlack.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),
});
//定義滑竿 監聽動畫運動的函式
function rangeValue(){
//把input的值變為正數
var newSpeed = Math.abs(elem.value);
//清除原有的時間迴圈
clearInterval(begin);
clearInterval(beginmarker);
//時間迴圈控制速度，go函式是綠色路徑的繪製
begin = setInterval(go, newSpeed);
//時間迴圈控制速度，gomarer函式是綠色箭頭跟隨路徑運動
beginmarker = setInterval(gomarker, newSpeed);
}
//點選開始回放按鈕
$('.top_btn1').on('click',function(){
if($('.top_btn1').text() == '開始回放'){
//對input滑竿進行監聽事件，開始動畫
elem.addEventListener("input", rangeValue);
//獲取滑竿的預設速度
rangeValue();
//點選顯示詳細資訊
blackInfoWindow.open(map, markerBlack);
$('.top_btn1').text('暫停回放');
}else{
//暫定時間迴圈
clearInterval(begin);
clearInterval(beginmarker);
//關閉小黑點顯示的資訊
blackInfoWindow.close(map, markerBlack);
$('.top_btn1').text('開始回放');
//移出對滑竿input的監聽
elem.removeEventListener("input", rangeValue);
}
});
//點選重新整理頁面，展示預設軌跡
$('.top_btn2').on('click',function () {
window.location.reload();
});
//回放路徑執行的函式
function go() {
//根據計數當前進度擷取myTrip陣列
let myTrips = myTrip.slice(0,tripCount);
//畫出回放(綠色)路徑
flightPath=new google.maps.Polyline({//建立線性疊加層物件
path:myTrips,//路徑
strokeColor:polyLineColor[1],//線條顏色
strokeOpacity:0.8,//線條透明度
strokeWeight:3,//線條寬度
});
flightPath.setMap(map);
//根據當前回訪路徑移動小黑點的位置
markerBlack.setPosition(myTrip[tripCount]);
//重置移動的內容
let content = "裝置號:"+jsonData[0].imei+
"</br>時間:"+jsonData[tripCount].receivetime+
"</br>速度:"+jsonData[tripCount].speed + '公里/小時'
blackInfoWindow.setContent(content);
//進度加一
tripCount++;
//對回訪路徑進度進行判斷，如果路徑回放完畢，重新整理頁面
if(tripCount==myTrip.length){
window.location.reload();
}
}
//初始化箭頭顯示的陣列
let marker0 = new google.maps.Marker({
position: myTrip[0],
icon: '/RoadGPS/images/jiantou.png'
});
let markerArr = [marker0];
//控制箭頭根據角度變化來顯示不同的圖片
function gomarker() {
//根據實際行走方向的角度判斷顯示不同方向的箭頭圖片
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: myTrip[markerCount],
icon: img
});
markerArr.push(marker1);
markerArr[1].setMap(map);
//對上一個marker刪除，延遲20ms防止箭頭閃動
setTimeout(function(){
markerArr[0].setMap(null);
//對已經刪除了的marker從陣列中刪除
markerArr.shift();
},20)
//marker計數加一
markerCount++;