Yahoo! Map APITaiwan Version

04/13/23 Zordius

2

Agenda

• Introduce

• A Sample: smartmap

• Q/A

3

Introduce

•Yahoo! Map API官方網站http://tw.developer.yahoo.com/

maps/

4

Introduce

•第一步 : 申請 APPID

http://developer.yahoo.com/

wsregapp/

5

Introduce

•第二步 : 加入 script<script language=“JavaScript”

src=“http://tw.api.maps.yahoo.com/ajaxymap?

v=3.8&appid=剛申請好的 appid"></script>

6

Introduce

•第三步 : 開始 coding!var map = new

YMap(document.getElementById('map'));

map.drawZoomAndCenter('台北 ');

7

Introduce

•更多methodsvar map = new

YMap(document.getElementById('map'));

map.addZoomLong();

map.drawZoomAndCenter('台北車站 ', 1);

http://developer.yahoo.com/maps/ajax/V3.8/

index.html

8

A Sample: smartmap

•目的 :

–自動幫 blog的內容添加地圖效果

–寫 blog的人不需要懂高深的技術

–增加閱讀 blog的便利性

9

A Sample: smartmap

• 使用前

10

A Sample: smartmap

• 使用後

11

A Sample: smartmap實作方法

1. 用 regexp找出文章當中所有具有地址特徵的字串

2. 將這些字串取代為 link

3. 建立一個供map 使用的 div

4. 處理mouseover事件 , 移動 div以及地圖中心5. 處理mouseout事件 , 將 div藏起來

12

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ｆＦ樓 ]){0,1})', 'g');

xx縣 xx市 xx路 xx段 xx號

13

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>

14

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>

15

A Sample: smartmap

DEMO

16

Q&A