<xmp id="youqw">
<xmp id="youqw">
  • <blockquote id="youqw"><blockquote id="youqw"></blockquote></blockquote>
    站長工具,就用查一把!
    收錄查詢  關鍵詞排名  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.mwrarmyalaska.com/Content/37
    網友點評
    国产AV精选aaaaaaa