让google map 动起来

最新推荐文章于 2024-11-12 20:08:21 发布

原创最新推荐文章于 2024-11-12 20:08:21 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#google #javascript #flash #date #function #url

JavaScript 同时被 2 个专栏收录

7 篇文章

订阅专栏

Google Map

2 篇文章

订阅专栏

本文介绍如何在Google Maps网页版中实现类似Flash的效果，通过JavaScript定时查询并在地图上动态展示不同时间点的标记。重点讲解了使用setTimeout()方法按天循环更新地图标记的技术细节。

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