日韩黑丝制服一区视频播放|日韩欧美人妻丝袜视频在线观看|九九影院一级蜜桃|亚洲中文在线导航|青草草视频在线观看|婷婷五月色伊人网站|日本一区二区在线|国产AV一二三四区毛片|正在播放久草视频|亚洲色图精品一区

分享

Ajax支持的Google地圖Mashup教程(4)

 guoxi022 2007-06-14

Ajax支持的Google地圖Mashup教程

作者: ,  出處:Dev2Dev, 責(zé)任編輯: 葉江, 
2007-06-13 14:59
  本文中將使用工具輕松構(gòu)建終極的Hello World mashup:Google地圖mashup……
 

  客戶端將使用XMLHttpRequest 從REST服務(wù)檢索JSON 對(duì)象。一旦檢索到該對(duì)象,JavaScript 代碼將需要反序列化對(duì)象,然后遍歷整個(gè)數(shù)組。看一下mapper.js,就可以看到 getLocationsAndMap 和 getLocationsAndMapCallback 函數(shù)完成了這一功能:

// Gets the current locations from the REST service
// on the server and writes out the HTML that
// contains links for the map

function getLocationsAndMap() {
 if (receiveReq.readyState == 4 ||
     receiveReq.readyState == 0)
 {     
   // getD2DSites.html is a REST service
   // that returns the list of locations
   // as JSON
 
   receiveReq.open("GET", ‘getD2DSites.html‘,
                   true);              
   receiveReq.onreadystatechange =
               getLocationsAndMapCallback;     
   receiveReq.send(null);      
 } // end  if  
} // end  function

function getLocationsAndMapCallback() {
 // state == 4 is when the response is complete
 if (receiveReq.readyState == 4) {             
  // Deserialize the JSON response (eval() command)
  // This creates an array of location objects.
  var response = eval("("+request.responseText+")");
  // generate HTML listing the locations and update 
  //   the page DOM so the user will see the HTML
  var div = document.getElementById(‘loc_div‘);        
  div.innerHTML = ‘<p>Received ‘ +
   response.locations.location.length+‘ results.‘;
 
  for(i=0;i < response.locations.location.length; i++) {
        var city = response.locations.location[i].city;
        var anchor = ‘‘; // TODO: we will fix this later
        div.innerHTML += ‘<p><b>‘+ city + ‘</b> ‘ +
          anchor + loc + ‘</a><br/>‘ + addr + ‘</p>‘;
  } // end  for loop
 } // end   if (state == 4)
} // end   function

  請(qǐng)注意, eval 調(diào)用將接收J(rèn)SON 并對(duì)它進(jìn)行計(jì)算,有效地構(gòu)建一個(gè)可以導(dǎo)航的JavaScript數(shù)組。For 循環(huán)顯示了如何在數(shù)組內(nèi)遍歷地理位置:

  至此,您已經(jīng)完成了這些工作:

  •   創(chuàng)建一個(gè)靜態(tài)的 REST 服務(wù) HTML 文件
  •   向HTML文件添加一個(gè)JSON 有效負(fù)載
  •   編寫(xiě)代碼通過(guò)eval()將JSON 重構(gòu)為一個(gè)JavaScript 對(duì)象
  •   編寫(xiě)代碼來(lái)循環(huán)遍歷地址數(shù)組,使用新的HTML操縱DOM

  現(xiàn)在,讓我們來(lái)看如何在Google 地圖中顯示這些位置。

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多