0

私は現在 Google Maps V3 API を使用しており、事前に決められたルートを移動するようにマーカーをアニメーション化しています。ルート情報はlat、緯度座標とlon経度座標の 2 つの個別の配列に格納されます。マーカーの動きを一時停止および再開するボタンを作成しようとすると、ロジックの問題が発生します。コードは次のとおりです。

  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()現在、関数を呼び出すボタンと関数を呼び出すボタンの 2 つのボタンがありclickPlay()ます。一時停止は正常に機能しますが、再開しようとすると、マーカーが非常に奇妙な動作を示します。

基本的に、マーカーは最後に一時停止した位置にジャンプして戻り、次にすばやく前方にジャンプして、マーカーの位置が更新されるたびにこれを行っているようです (これは、1000 ミリ秒ごとに 1 回、または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です。

誰でも私を助けることができますか？

4

1 に答える 1

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);
}
于 2013-01-27T17:05:09.850 に答える