• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Yahoo! Map API
 

Yahoo! Map API

on

  • 3,490 views

 

Statistics

Views

Total Views
3,490
Views on SlideShare
3,486
Embed Views
4

Actions

Likes
0
Downloads
10
Comments
0

1 Embed 4

http://www.slideshare.net 4

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Yahoo! Map API Yahoo! Map API Presentation Transcript

    • Yahoo! Map API Taiwan Version 06/04/09 Zordius
    • Agenda
      • Introduce
      • A Sample: smartmap
      • Q/A
    • Introduce
      • Yahoo! Map API 官方網站
      • http://tw.developer.yahoo.com/maps/
    • Introduce
      • 第一步 : 申請 APPID
      • http://developer.yahoo.com/wsregapp/
    • Introduce
      • 第二步 : 加入 script
      • <script language=“JavaScript” src=“http://tw.api.maps.yahoo.com/ajaxymap?v=3.8&appid= 剛申請好的 appid &quot;></script>
    • Introduce
      • 第三步 : 開始 coding!
      • var map = new YMap(document.getElementById('map'));
      • map.drawZoomAndCenter(' 台北 ');
    • Introduce
      • 更多 methods
      • var map = new YMap(document.getElementById('map'));
      • map.addZoomLong();
      • map.drawZoomAndCenter(' 台北車站 ', 1);
      • http://developer.yahoo.com/maps/ajax/V3.8/index.html
    • A Sample: smartmap
      • 目的 :
        • 自動幫 blog 的內容添加地圖效果
        • 寫 blog 的人不需要懂高深的技術
        • 增加閱讀 blog 的便利性
    • A Sample: smartmap
      • 使用前
    • A Sample: smartmap
      • 使用後
    • A Sample: smartmap
      • 實作方法
      • 用 regexp 找出文章當中所有具有地址特徵的字串
      • 將這些字串取代為 link
      • 建立一個供 map 使用的 div
      • 處理 mouseover 事件 , 移動 div 以及地圖中心
      • 處理 mouseout 事件 , 將 div 藏起來
    • A Sample: smartmap
      • 用 regexp 找出文章當中所有具有地址特徵的字串
      • 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');
      xx 縣 xx 市 xx 路 xx 段 xx 號
    • A Sample: smartmap
      • 將這些字串取代為 link
      • 北市峨嵋街 52 號
      • <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>
    • A Sample: smartmap
      • 處理 mouseover 事件 , 移動 div 以及地圖中心
      • handleMouseOver: function(E) {
      • var dTarget= YAHOO.util.Event.getTarget(E);
      • smartmap.style.top = (YAHOO.util.Dom.getY(dTarget) - map_height - 4);
      • smartmap.style.left = YAHOO.util.Dom.getX(dTarget);
      • map.drawZoomAndCenter (dTarget.innerHTML, 3);
      • }
      • <a href=“http://xxxxx”> 北市峨嵋街 52 號 </a>
    • A Sample: smartmap
      • DEMO
      • Q&A