tinyMap : auto panto

by essoduke chang

HTML

<script src="http://maps.google.com/maps/api/js?key=AIzaSyCOR9r_QnT2evmaj4B_Uc_Vqfd2VOe4MnQ&amp;sensor=false&amp;language=zh-TW"></script>
<script src="http://app.essoduke.org/js/tinyMap/jquery.tinyMap-2.5.3.min.js?ver=2.5.3.0"></script>
<div id="map"></div>

CSS

#map{width:640px;height:480px;border:1px solid #000}

JavaScript

$(function () {
    
    // 本範例使用 tinyMap 2.5.3 最新版本。
    
    var loc = [        
        {'x': '25.039065815333753', 'y': '121.56097412109375'},
        {'x': '25.035877438787317', 'y': '121.55715465545654'},
        {'x': '25.035255306871402', 'y': '121.56998634338379'},
        {'x': '25.04380934412532', 'y': '121.55998706817627'},
        {'x': '25.04151536540612', 'y': '121.56354904174805'}
    ];
    
    var i = 0;
    var interval = 5000; // 等待秒數（毫秒 ms）
    var map = $('#map');
    
    // 預設地圖
    map.tinyMap({
        center: '台北市政府',
        zoom: 17
    });    
    
    // 將位置以 setInterval 方式依序觸發
    for (i = 0; i < loc.length; i++) {
        window.setTimeout(function (g) {
            // 單純移動地點的話，只需要呼叫 panto 方法。
            map.tinyMap('panto', loc[g]);          
            // 若是要修改地圖才使用 modify.
            // $(selector).tinyMap('modify', {OPTIONS})            
        }, (i * interval), i);
    }

});