Yahoo! Maps AJAX API 範例 Yahoo, Maps

wmh

新出爐的台灣版 Yahoo! Maps AJAX API (Yahoo! 奇摩地圖 API)，試試看吧：

輸入地址或關鍵字：
或試試這些景點：台北101、陽明山、小碧潭捷運站、光華商場、新竹縣新豐鄉上坑村坑子口102之1號(小叮噹科學遊樂區)

Yahoo! Maps API 使用方式與其他地圖 API 相似，先到以下網址取得授權碼：

http://developer.yahoo.com/wsregapp/

其中 Authentication method 選擇「Generic」即可，表示不需要使用者認證，其他各項自行填寫。完成後會得到一組授權碼，用於 API 的參數之一。台灣 Yahoo! Maps API 的 JavaScript 位置如下：

<script type="text/javascript" src="http://tw.api.maps.yahoo.com/ajaxymap?v=3.8&appid=你的授權碼"></script>

以下的範例是本頁用到的幾個功能：

<!-- 地圖用的 div -->
<div id="map"></div>

<!-- 引用地圖的 JavaScript API，記得使用你自己申請的授權碼 -->
<script type="text/javascript" src="http://tw.api.maps.yahoo.com/ajaxymap?v=3.8&appid=VtWGhknV34E4UMtrfTvfQy3SJyEcYBFpbDTtrwSblDlyqbYJA2BkhzpHBA--"></script>

<script type="text/javascript">
//初始化
var map = new YMap(document.getElementById('map'));

//設定地圖為一般街道圖，另外還有衛星圖 YAHOO_MAP_SAT 可用
map.setMapType(YAHOO_MAP_REG);

//加入地圖種類的切換鈕
map.addTypeControl();

//加入放大縮小的控制項
map.addZoomLong();

//將地圖中心定位到台北車站，地圖解析度為第二級
map.drawZoomAndCenter('台北車站', 2);
</script>

有興趣的人可以前往以下網址得到更多資訊：

• Yahoo! 地圖 API 介紹
• 範例
• API 參考手冊

wmh

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

新店市好吃的餐廳

• 可愛村便當：台北縣新店市大豐街8號
• 阿輝現炒黃牛肉：台北縣新店市中興路三段225號
• 黑人牛肉麵：台北縣新店市中興路三段176號
• 蘇杭：台北縣新店市民權路25號2F
• 王家包子：台北縣新店市國校路25號之1
• 辣。四川成都小炒：台北縣新店市吉安路2-1號
• 山東餃子館：台北縣新店市中央路133巷19號1樓
• 樂陶然健康小火鍋：台北縣新店市中央五街2號
• 六六火鍋：台北縣新店市中央路89號
• 龍門客棧：台北縣新店市中央路98號之1
• 麵對麵：台北縣新店市中央路33號

使用方式請下載 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

這裡真是好地方
試了一下yahoo!map很好玩 感恩

凱森

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