谷歌地圖動畫多個符號

我只是試圖改變谷歌的animateCircle（）的版本，以便它將動畫多個圖標，而不是一個，但它似乎並沒有爲第一個圖標工作。有任何想法嗎？谷歌地圖動畫多個符號

路徑是包含有關路徑的其他信息的路徑數組。

var icons = [{ icon : lineSymbol, offset : "100%"}, 
          { icon : lineSymbol, offset : "90%"}]  

function animateArrow() { 
     var count = 0; 
     offsetId = window.setInterval(function() { 
      count = (count + 1) % 200; 

      var icons = paths.path.get('icons'); 
      for (var i = 0; i < icons.length; i++) { 
       icons[i].offset = (count/2) + '%'; 
      } 
      paths.path.set('icons', icons); 
     }, 20); 
    }

來源

2013-06-21 John

想通了。注意：這裏沒有顯示path。 percentSpaced應根據所需的間距進行更改，即對於符號間的20％間距，應爲20。

function animateArrow(path) { 
       var count = 0, icons = new Array(); 
       var percentSpaced = 20; 
       var intervalTime = 20; // miliseconds 


       var lineSymbol = { 
        path : google.maps.SymbolPath.FORWARD_CLOSED_ARROW, 
        strokeColor : "#000000", 
        strokeOpacity : .95, 
        strokeWeight : 10, 
        fillColor : "#FFFFFF", 
        fillOpacity : .7 
       }; 

       for (var i = 0; i < 100/percentSpaced; i++) { 
        icons.push({ icon : lineSymbol }); 
       } 

       path.set("icons", icons); 

       offsetId = window.setInterval(function() { 
        count = (count + 1) % 200; 

        var icons = paths.path.get('icons'); 
        for (var i = 0; i < icons.length; i++) { 
         icons[i].offset = ((count/2) + (i * percentSpaced)) % 100 + '%'; 
        } 
        path.set("icons", icons); 
       }, intervalTime); 
      }

有兩件事情你必須要考慮：

1）計數成立假設只有1圖標。（因此(i * percentSpaced)）

2）如果圖標的百分比超過100％，圖標應該從頭開始。（因此% 100最後）

來源

2013-06-21 13:16:52 John

谷歌地圖動畫多個符號

回答

相關問題