Successfully reported this slideshow.

Yahoo! Map API

2,231 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Yahoo! Map API

  1. 1. Yahoo! Map API Taiwan Version 06/04/09 Zordius
  2. 2. Agenda <ul><li>Introduce </li></ul><ul><li>A Sample: smartmap </li></ul><ul><li>Q/A </li></ul>
  3. 3. Introduce <ul><li>Yahoo! Map API 官方網站 </li></ul><ul><li>http://tw.developer.yahoo.com/maps/ </li></ul>
  4. 4. Introduce <ul><li>第一步 : 申請 APPID </li></ul><ul><li>http://developer.yahoo.com/wsregapp/ </li></ul>
  5. 5. Introduce <ul><li>第二步 : 加入 script </li></ul><ul><li><script language=“JavaScript” src=“http://tw.api.maps.yahoo.com/ajaxymap?v=3.8&appid= 剛申請好的 appid &quot;></script> </li></ul>
  6. 6. Introduce <ul><li>第三步 : 開始 coding! </li></ul><ul><li>var map = new YMap(document.getElementById('map')); </li></ul><ul><li>map.drawZoomAndCenter(' 台北 '); </li></ul>
  7. 7. Introduce <ul><li>更多 methods </li></ul><ul><li>var map = new YMap(document.getElementById('map')); </li></ul><ul><li>map.addZoomLong(); </li></ul><ul><li>map.drawZoomAndCenter(' 台北車站 ', 1); </li></ul><ul><li>http://developer.yahoo.com/maps/ajax/V3.8/index.html </li></ul>
  8. 8. A Sample: smartmap <ul><li>目的 : </li></ul><ul><ul><li>自動幫 blog 的內容添加地圖效果 </li></ul></ul><ul><ul><li>寫 blog 的人不需要懂高深的技術 </li></ul></ul><ul><ul><li>增加閱讀 blog 的便利性 </li></ul></ul>
  9. 9. A Sample: smartmap <ul><li>使用前 </li></ul>
  10. 10. A Sample: smartmap <ul><li>使用後 </li></ul>
  11. 11. A Sample: smartmap <ul><li>實作方法 </li></ul><ul><li>用 regexp 找出文章當中所有具有地址特徵的字串 </li></ul><ul><li>將這些字串取代為 link </li></ul><ul><li>建立一個供 map 使用的 div </li></ul><ul><li>處理 mouseover 事件 , 移動 div 以及地圖中心 </li></ul><ul><li>處理 mouseout 事件 , 將 div 藏起來 </li></ul>
  12. 12. A Sample: smartmap <ul><li>用 regexp 找出文章當中所有具有地址特徵的字串 </li></ul><ul><li>new RegExp('(([ 台臺 ][ 北中南東 ]| 北 | 高 | 宜蘭 | 花蓮 | 金門 | 南投 | 屏東 | 苗栗 | 桃園 | 高雄 | 基隆 | 連江 | 雲林 | 新竹 | 嘉義 | 彰化 | 澎湖 )[ 縣市 ](.{2,5}[ 鄉鎮市區 ])?(.{2,5}[ 村里鄰 ])?(.{2,5}[ 路街道段 ])?(' + smartAddress.numrmt + ' 段 )?(.{1,4} 巷 )?(' + smartAddress.numrmt + '{1,4} 弄 )?(.{1,6}[ 號号 ])([ 之 bB]' + smartAddress.numrmt + '|' + smartAddress.numrmt + '{1,2}[fF fF樓 ]){0,1})', 'g'); </li></ul>xx 縣 xx 市 xx 路 xx 段 xx 號
  13. 13. A Sample: smartmap <ul><li>將這些字串取代為 link </li></ul><ul><li>北市峨嵋街 52 號 </li></ul><ul><li><a href=“ http://tw.map.yahoo.com/?addr= %E5%8C%97%E5%B8%82%E5%B3%A8%E5%B5%8B%E8%A1%9752%E8%99%9F &ei=utf8 ”> 北市峨嵋街 52 號 </a> </li></ul>
  14. 14. A Sample: smartmap <ul><li>處理 mouseover 事件 , 移動 div 以及地圖中心 </li></ul><ul><li>handleMouseOver: function(E) { </li></ul><ul><li>var dTarget= YAHOO.util.Event.getTarget(E); </li></ul><ul><li>smartmap.style.top = (YAHOO.util.Dom.getY(dTarget) - map_height - 4); </li></ul><ul><li>smartmap.style.left = YAHOO.util.Dom.getX(dTarget); </li></ul><ul><li>map.drawZoomAndCenter (dTarget.innerHTML, 3); </li></ul><ul><li>} </li></ul><ul><li><a href=“http://xxxxx”> 北市峨嵋街 52 號 </a> </li></ul>
  15. 15. A Sample: smartmap <ul><li>DEMO </li></ul>
  16. 16. <ul><li>Q&A </li></ul>

×