站長工具,就用查一把!
收錄查詢  關鍵詞排名  Alexa排名  PR檢測  友情檢測  IP反查  WHOIS查詢    更多查詢  
  收藏  最近查詢 查一把
信息分類 首頁 » 資訊信息

好站推薦

IT新聞

  業界猜想

  名人名企

建站推廣

  站長創業

  運營推廣

設計編程

  美工設計

  開發編程

【百度地圖API】如何實現信息窗口輪詢
信息來源:查一把 發布時間:2011/9/13

摘要:

  很多微博或者SNS開發者,想結合地圖展示用戶的微博或者狀態。這時,利用信息窗口就是最好的展示方式了。

  在這里,我們使用信息窗口輪詢的方式來實現這一功能。當然,你也可以及時地展示用戶微博或狀態。

 

-----------------------------------------------------------------------------------

為了簡明,這里只列出javascript部分的地圖程序。完整源代碼在文章末尾。

 

效果圖

 

------------------------------------------------------------------------------------

 

一、創建地圖

var map = new BMap.Map("container");    //創建地圖容器
var point = new BMap.Point(116.404, 39.915); //創建一個點對象
map.centerAndZoom(point, 15); //設置地圖中心點和地圖級別

  

 

 

二、創建和信息窗口

在這里,我使用了2個數組,分別放點,和信息窗口。一共創建了6個。

當然,這里可以讀取后臺數據庫里存放的經緯度和信息窗口。

我這里用了最簡單的信息窗口示例,你可以選擇《高級信息窗口》:http://www.cnblogs.com/milkmap/archive/2011/08/04/2127663.html

//創建6個點,對應6個信息窗口
var point = [new BMap.Point(116.289502,39.913487),new BMap.Point(116.465983,39.959509),new BMap.Point(116.467278,39.888646),new BMap.Point(116.289502,39.913487),new BMap.Point(116.465983,39.959509),new BMap.Point(116.487278,41.288646)];
var infoWindow = [new BMap.InfoWindow("長安靜雅大酒店中餐廳"),new BMap.InfoWindow("希爾頓飯店-源豕日本料理"),new BMap.InfoWindow("華騰大廈"),new BMap.InfoWindow("長安靜雅大酒店中餐廳"),new BMap.InfoWindow("希爾頓飯店-源豕日本料理"),new BMap.InfoWindow("西直門嘉茂")];

  

 

附:

《GPS到百度坐標》的轉換,請使用工具:http://dev.baidu.com/wiki/static/map/API/examples/?v=1.2&0_5#0&5

《PHP讀取數據庫》可參考教程:http://www.cnblogs.com/milkmap/archive/2011/08/16/2135323.html

 

 

三、實現信息窗口輪詢

注意,請大家不要使用setTimeout和for循環這樣的語句,在這里是行不通的。因為現在瀏覽器對這種運算的計算速度都很快。我們只能看到最后一個信息窗口的效果。錯誤代碼如下:

for(i=0;i<infoWindow.length;i++){
setTimeout(
function(){
map.openInfoWindow(infoWindow[i],point[i]);
},
1000);
}

 

 

 

現在給大家介紹一個行之有效的方法——setInterval。setInterval() 方法會不停地調用函數,直到 clearInterval() 被調用或窗口被關閉。

先來看看單次循環的寫法。

var i = 0;      //計數器
var timer = null;
function show(){
timer
= setInterval(function(){
if(i > infoWindow.length){ //當計數器大于信息窗口數量時
clearInterval(timer); //停止循環
return;
}
map.openInfoWindow(infoWindow[i],point[i]);
//打開與計數器對應的信息窗口
i++;
},
1000); //延時一秒
}
show();
//函數啟動

  

 

 

再來看看無限循環,就是輪播的代碼,其實只改了一句。

當一次循環結束后,讓計數器歸零,重新循環。

var ind = 0;
var timer = null;
function show(){
timer
= setInterval(function(){
if(ind == infoWindow.length){
ind
= 0; //當輪播到最后一個信息窗口時,把計數器至為0
}
map.openInfoWindow(infoWindow[ind],point[ind]);
ind
++;
},
2000);
}
show();

  

 

 

 

四、完整源代碼

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=uft-8" />
<title>信息窗口輪詢</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point,
15);
var i = 0;

//創建6個點,對應6個信息窗口
var point = [new BMap.Point(116.289502,39.913487),new BMap.Point(116.465983,39.959509),new BMap.Point(116.467278,39.888646),new BMap.Point(116.289502,39.913487),new BMap.Point(116.465983,39.959509),new BMap.Point(116.487278,41.288646)];
var infoWindow = [new BMap.InfoWindow("長安靜雅大酒店中餐廳"),new BMap.InfoWindow("希爾頓飯店-源豕日本料理"),new BMap.InfoWindow("華騰大廈"),new BMap.InfoWindow("三元里屯"),new BMap.InfoWindow("麗江西里"),new BMap.InfoWindow("西直門嘉茂")];


var ind = 0;
var timer = null;
function show(){
timer
= setInterval(function(){
if(ind == infoWindow.length){
ind
= 0; //當輪播到最后一個信息窗口時,把計數器至為0
}
map.openInfoWindow(infoWindow[ind],point[ind]);
ind
++;
},
2000);
}
show();

</script>
轉載請注明出處:站長工具 信息來源:http://www.zuntuo.tw/Content/37
網友點評
b北京赛车视频