小 YG 生活+ 的幕後…

上上篇講到Yahoo!生活+的API, 就拿來跟google map搞搞看, 弄了一個簡單的範例.
除了Y!生活+API以外, 還用到

• Google Map API: Google 地圖
• Google Custom Search Engine: Google 提供可自訂的搜尋引擎
• Google AJAX Search的Local Search. 已內含在 Google Map API 裡. 在google map裡顯示一個搜尋列,可以搜尋第圖上的資料.
• Yahoo Pipes,因為生活+提供的資料沒有JSON格式, 只好過水一下, 也順便擁有JSON+callback的能力.
• YUI 的 CSS 部份, 以及Yullio.
• jQuery

我將現在的程式碼以CC by-NC-SA的授權公開, 提供下載. 現在的程式碼並不複雜, 以後一些功能加上去, 反而不易閱讀. 也沒用到奇怪的技巧與技術, 希望能當作一個學習的範例.

/* 本篇只大概說明以及給相關連結, 並不是 step-by-step 文件. 網路上有太多教學文件了, 沒必要再造一個輪子.. */

Yahoo!生活+的部份

1. 首先要先申請 appid , 先到 應用程式帳號申請 填寫資料. 認證等級 (Authentication method) 選一般 (Generic) 即可. 接下來會獲得一組又臭又長的appid.
2. 再使用 Auth.bootUp 註冊 appid. 就可以使用 api 了.
3. AJAX讀的資料無法跨站使用, 一個方法是用JSON+callback function (有專有名詞嗎?) , Yahoo Pipes 提供輸出成 json 格式, 以及加上 callback function. 只要先過Yahoo Pipes (可以使用我做的), 就有這好用功能. 請參閱前篇.

Google Map 的部份

1. Google Maps API Tutorial: 很棒的教學與範例.
2. Google Earch Icons: 列出 Google Earth 提供的icon
3. 列表上開啟marker: 有
   

   GEvent.trigger(marker, “click”);

   可以用, 雖然每個教學都教你用

   marker.openInfoWindowHtml(html[i]);

4. Info視窗最大化: gmap官網提供的範例, 會有註冊複數個handler的問題, 我的方法是註冊一個, 每次查id . 請參閱程式碼.
5. 最大化Info視窗的內容:官網的範例是用 GDownloadUrl , 我的作法是先塞特定class的
   進去, 再讓callback function去更改內容.
6. Local Search Control for Google Maps

jQuery:

1. 隱藏詳細資料.
2. 處理url的query string: 用Query String Object這個plugin, 可以直接
   

   $.query.get(’classid’);

   取得 URL?classid=3 的classid的值.

3. 判斷導覽列上的標籤, 用 getUrlParam 取得 classid 的值, 再與現在的 classid 比對.

程式碼

下載程式碼看吧…
程式碼 測試網站 目錄