讓google map 動起來

      最近在研究怎麼在網頁版的google map 中實現類似flash 的效果,本來google map 是有自己的flash 版的,但是現在Flash V2版的還是需要Key 的,但是現在google官網是沒法申請key 了,所以只好自己想辦法。

      我想實現的效果就是這兩個輸入框中,用戶輸入時間,把這兩個時間點的數據以marker 的形式標記在地圖上,不是一次性全部顯示,而是以天爲單位能看到地圖上的marker是變化的。

思路是:延時循環查詢、顯示

在javascript 中setTimeout() 方法用於在指定的毫秒數後調用函數或計算表達式。

語法

setTimeout(code,millisec)
參數描述:

code必需。要調用的函數後要執行的 JavaScript 代碼串。

millisec必需。在執行代碼前需等待的毫秒數。

一些例子:

http://blog.163.com/fan_yishan/blog/static/476922132007112185942663/

http://developer.51cto.com/art/201106/268637.htm

那回到自己的程序:

function rapidChange()
            {   
                markers.length=0;
                var sel=document.getElementById("searchty");
                type = sel.options[sel.selectedIndex].value;
                var sev=document.getElementById("searchlo");
                state = sev.options[sev.selectedIndex].value;
                var name_add= name_address(state);
                var time1=document.getElementById("searchti1");
                var time2=document.getElementById("searchti2");
                //var year = time.options[time.selectedIndex].value;
                var year1=time1.value;
               
                var year2=time2.value;
                var d1 = new Date(year1.replace(/\-/g, "/"));
                var d2 = new Date(year2.replace(/\-/g, "/")); 
                var getOffDays = function(startDate, endDate) {  
                    //得到時間戳相減 得到以毫秒爲單位的差  
                    var mmSec = (endDate.getTime() - startDate.getTime());
                    //單位轉換爲天並返回 
                    return (mmSec / 3600000 / 24); 
                };  
                var p=getOffDays(d1,d2);
                var Ti;
                     
                
             
                
                if(m<=p){
                    Ti=year1;              
                    var arr = Ti.split("-");  
                    var newdt = new Date(Number(arr[0]),Number(arr[1]),Number(arr[2]));
                    var month;
                    var day;
                    if(newdt.getMonth()<10){
                        month="0"+newdt.getMonth();
                    }
                    if(newdt.getDate()+(m)<10){
                        day="0"+(newdt.getDate()+(m));
                    }else{
                        day=newdt.getDate()+(m);
                    }
                    var repnewdt = newdt.getFullYear() + "-" + month + "-" + day; 
                   
                    var url = "forecastSearch.php?type=" + escape(type) + "&location=" + escape(name_add)+"&year=" + escape(repnewdt);//中文的時候使用
                    
                    url=url+"&sid="+Math.random();
             
                    xmlHttp=GetXmlHttpObject();
                    if (xmlHttp==null) {
                        alert("Browser does not support HTTP Request");
                        return;
                    }    
                    xmlHttp.open("GET",url,true);
                    xmlHttp.onreadystatechange=stateChanged;
                    xmlHttp.send(null);  
                    m=m+1;
                    setTimeout('rapidChange()',4000);
                    
                }          
            }  

首先計算出兩個時間的差值 
 var p=getOffDays(d1,d2);
然後對要查詢的時間進行+1 ,在調用setTimeout函數

發佈了27 篇原創文章 · 獲贊 31 · 訪問量 37萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章