返回列表 發帖

Yahoo! Maps AJAX API 範例

新出爐的台灣版 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>
有興趣的人可以前往以下網址得到更多資訊:
To infinity and beyond!

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:地圖應用小工具
To infinity and beyond!

TOP

返回列表 回復 發帖