【百度地圖API】如何實現信息窗口輪詢【百度地圖API】如何實現信息窗口輪詢

時間 2019-12-08

標籤百度地圖API 如何實現信息窗口輪詢简体版

原文原文鏈接

原文: 【百度地圖API】如何實現信息窗口輪詢

摘要：javascript

　　不少微博或者SNS開發者，想結合地圖展現用戶的微博或者狀態。這時，利用信息窗口就是最好的展現方式了。html

　　在這裏，咱們使用信息窗口輪詢的方式來實現這一功能。固然，你也能夠及時地展現用戶微博或狀態。java

-----------------------------------------------------------------------------------數據庫

爲了簡明，這裏只列出javascript部分的地圖程序。完整源代碼在文章末尾。api

效果圖數組

------------------------------------------------------------------------------------瀏覽器

1、建立地圖函數

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

2、建立和信息窗口工具

在這裏，我使用了2個數組，分別放點，和信息窗口。一共建立了6個。post

固然，這裏能夠讀取後臺數據庫裏存放的經緯度和信息窗口。

我這裏用了最簡單的信息窗口示例，你能夠選擇《高級信息窗口》：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

3、實現信息窗口輪詢

注意，請你們不要使用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();

4、完整源代碼

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

【百度地圖API】如何實現信息窗口輪詢 【百度地圖API】如何實現信息窗口輪詢

【百度地圖API】如何實現信息窗口輪詢【百度地圖API】如何實現信息窗口輪詢