[英]What's wrong with the logic here?
我目前正在使用Google Maps V3 API,並且正在為標記設置動畫以使其行進預定路線。 路線信息存儲在兩個單獨的數組中,緯度坐標為lat
,緯度坐標為lon
。 嘗試建立按鈕以暫停和恢復標記的移動時遇到邏輯問題。 這是代碼:
var paused = 0; //paused state
var interval = 1000; //interval for animation (ms)
function clickPause() {
paused = 1;
}
function clickPlay() {
paused = 0;
}
function moveToStep(yourmarker,yourroute,c) {
var LatLon;
var time;
var hours;
var minutes;
var seconds;
var finalTime;
var stopTime;
if (yourroute.length > c) {
LatLon = new google.maps.LatLng(lat[c],lon[c]);
yourmarker.setPosition(LatLon);
document.getElementById("currlat").innerHTML = lat[c];
document.getElementById("currlon").innerHTML = lon[c];
document.getElementById("currtime").innerHTML = c+1;
hours = 7+Math.floor((c+1)/3600);
minutes = Math.floor((c+1)/60);
seconds = (c+1)-minutes*60;
if(minutes == 60) {
minutes = 0;
}
finalTime = str_pad_left(hours,'0',2)+':'+str_pad_left(minutes,'0',2)+':'+str_pad_left(seconds,'0',2);
document.getElementById("finaltime").innerHTML = finalTime;
if(paused == 1) {
stopTime = c+1;
window.setInterval(function(){
if(paused == 0) {
moveToStep(yourmarker,yourroute,stopTime);
}
},interval);
}
else {
window.setTimeout(function(){
moveToStep(yourmarker,yourroute,c+1);
},interval);
}
}
}
function str_pad_left(string,pad,length) {
return (new Array(length+1).join(pad)+string).slice(-length);
}
function jumpTo(value) {
alert(value);
moveToStep(marker,lat,100);
}
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(31.26,121.45),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var marker = new google.maps.Marker({map: map,});
var newLatLng = new google.maps.LatLng(lat[0],lon[0]);
marker.setPosition(newLatLng);
moveToStep(marker,lat,0);
}
現在,我有兩個按鈕,一個調用clickPause()
函數,另一個調用clickPlay()
函數。 暫停效果很好,但是當我嘗試恢復時,標記器表現出一些非常奇怪的行為。
從本質上講,標記似乎在跳回到上次暫停的位置,然后又迅速向前跳,並且每次標記位置更新時都執行此操作(按每千毫秒一次或每秒一次,由interval
變量。)
有沒有人看過這種行為? 我不明白這些行的邏輯出了什么問題,我確定是罪魁禍首:
if(paused == 1) {
stopTime = c+1;
window.setInterval(function(){
if(paused == 0) {
moveToStep(yourmarker,yourroute,stopTime);
}
},interval);
}
else {
window.setTimeout(function(){
moveToStep(yourmarker,yourroute,c+1);
},interval);
}
我正在做的只是檢查模擬是否已暫停,如果已暫停,請檢查它是否已暫停,然后一旦恢復,就可以繼續移動標記。 一旦按下恢復按鈕,代碼應直接轉到
window.setTimeout(function(){
moveToStep(yourmarker,yourroute,c+1);
},interval);
因為已paused
的值已返回1
。
誰能幫我嗎?
您需要清除時間間隔,才能在恢復后停止觸發。 這意味着您需要存儲setInterval
返回的標識符,並在需要時將其傳遞給clearInterval
。
var pauseInterval; // interval identifier (outside the moveToStep function)
if (paused == 1) {
stopTime = c+1;
pauseInterval = setInterval(function() {
if(paused == 0) {
moveToStep(yourmarker, yourroute, stopTime);
}
}, interval);
} else {
clearInterval(pauseInterval);
setTimeout(function() {
moveToStep(yourmarker, yourroute, c+1);
}, interval);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.