最近在研究怎么在网页版的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函数