Board logo

標題: Yahoo! Maps AJAX API 範例 [打印本頁]
作者: wmh    時間: 2008-7-27 00:16     標題: Yahoo! Maps AJAX API 範例

新出爐的台灣版 Yahoo! Maps AJAX API (Yahoo! 奇摩地圖 API)，試試看吧： [jsg.example]
或試試這些景點：台北101、陽明山、小碧潭捷運站、光華商場、新竹縣新豐鄉上坑村坑子口102之1號(小叮噹科學遊樂區)

[/jsg.example] Yahoo! Maps API 使用方式與其他地圖 API 相似，先到以下網址取得授權碼： http://developer.yahoo.com/wsregapp/ 其中 Authentication method 選擇「Generic」即可，表示不需要使用者認證，其他各項自行填寫。完成後會得到一組授權碼，用於 API 的參數之一。台灣 Yahoo! Maps API 的 JavaScript 位置如下：
[JSCODE_RN][JSCODE_RN]
以下的範例是本頁用到的幾個功能：
[JSCODE_RN][JSCODE_RN]
[JSCODE_RN][JSCODE_RN][JSCODE_RN][JSCODE_RN][JSCODE_RN][JSCODE_RN]
有興趣的人可以前往以下網址得到更多資訊：
作者: wmh    時間: 2008-8-16 10:46

Yahoo Maps 出現了新玩法，請直接看看以下範例：

[jsg.example]
<h2>新店市好吃的餐廳</h2>
<ul id="foo">
  <li>可愛村便當：台北縣新店市大豐街8號</li>
  <li>阿輝現炒黃牛肉：台北縣新店市中興路三段225號</li>
  <li>黑人牛肉麵：台北縣新店市中興路三段176號</li>
  <li>蘇杭：台北縣新店市民權路25號2F</li>
  <li>王家包子：台北縣新店市國校路25號之1</li>
  <li>辣。四川成都小炒：台北縣新店市吉安路2-1號</li>
  <li>山東餃子館：台北縣新店市中央路133巷19號1樓</li>
  <li>樂陶然健康小火鍋：台北縣新店市中央五街2號</li>
  <li>六六火鍋：台北縣新店市中央路89號</li>
  <li>龍門客棧：台北縣新店市中央路98號之1</li>
  <li>麵對麵：台北縣新店市中央路33號</li>
</ul>
<script type="text/javascript" src="_lib/others/smart_address/smart_address_ajax.js"></script>
[/jsg.example]

使用方式請下載 smart_address_ajax.js

smart address 可批次處理多個地址並且以地圖的方式顯示，但這些地址必須被包含在某個 DOM Element 裡面，如：
<ul id="foo">
  <li>可愛村便當：台北縣新店市大豐街8號</li>
  <li>阿輝現炒黃牛肉：台北縣新店市中興路三段225號</li>
  <li>黑人牛肉麵：台北縣新店市中興路三段176號</li>
  <li>蘇杭：台北縣新店市民權路25號2F</li>
  <li>王家包子：台北縣新店市國校路25號之1</li>
  <li>辣。四川成都小炒：台北縣新店市吉安路2-1號</li>
  <li>山東餃子館：台北縣新店市中央路133巷19號1樓</li>
  <li>樂陶然健康小火鍋：台北縣新店市中央五街2號</li>
  <li>六六火鍋：台北縣新店市中央路89號</li>
  <li>龍門客棧：台北縣新店市中央路98號之1</li>
  <li>麵對麵：台北縣新店市中央路33號</li>
</ul>
所有要以地圖顯示的地址都被包在 id="foo" 的元素內，因此我們可以用 smart address 一次處理 id="foo" 元素內的所有地址。再打開你下載的 smart_address_ajax.js，找到倒數第 5 行：
  var YA = document.getElementById('foo');
修改 document.getElementById('foo') 為你的網頁內的元素 id 名稱，記得將 Yahoo Maps API 也先 load 進來，這樣就可以有很酷的地圖功能了。

此外還有點選地址直接連結到雅虎奇摩地圖網站的方式，詳情請見SmartMap：地圖應用小工具
作者: pupulu    時間: 2008-11-15 07:25

這裡真是好地方
試了一下yahoo!map很好玩 感恩
作者: 凱森    時間: 2009-5-10 04:56

哦，這個API讓我好睡!!!!!yahoo!!!!



歡迎光臨 jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 (http://www.jsgears.com/)