• <tbody id="eay9b"></tbody>
    <progress id="eay9b"><pre id="eay9b"></pre></progress>
    
    
    1. 站長工具,就用查一把!
      收錄查詢  關鍵詞排名  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.wwwlao6644.com/Content/37
      網友點評
      日式男女裸交吃奶动态图
    2. <tbody id="eay9b"></tbody>
      <progress id="eay9b"><pre id="eay9b"></pre></progress>