Yahoo Maps 的中文製作簡介 - 範例四

Yahoo Maps 範例四 - 顯示地圖, 並標上位址

回上頁

別忘了, 你可以利用瀏覽器上的 "檢視" -> "原始檔" (Internet Explorer) 或 "檢視" -> "此頁原始內容" (Firefox), 來觀看程式.

 <html>
<head>
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=Yahoo_ID"></script>
Yahoo 地圖 ID, 這字串要放在有 Yahoo 地圖的網頁 <head> 和 </head> 欄之間.

注意: 上個範例裡的 <style type="text/css"> #mapContainer { }, 已經被移除

</style>
</head>

<body>
<div id="mapContainer"></div>
顯示地圖的地方. 這個地圖的名稱是 mapContainer.

以下的 javascript 必須要在 <div id="mapContainer"></div> 之後, 地圖才可以顯示.

<script type="text/javascript">
var myPoint = new YGeoPoint(25.047795,121.5169);
設定地圖中心點, 並取名為 myPoint

var map = new YMap(document.getElementById('mapContainer'),YAHOO_MAP_SAT,new YSize(300,350));
製作 mapContainer 這個地圖物件為 map.
注意: 這個部份和上個舊範例 var map = new YMap(document.getElementById('mapContainer')); 有所不同. 新的範例另外又加上的地圖的顯示方式和地圖的大小. 三個程式改用一行執行.

map.drawZoomAndCenter(myPoint, 5);
畫上 myPoint 這物件的地圖, 並設定地圖縮放大小為 5. (數值越大, 地圖越遠)

map.addTypeControl();
把地圖物件 map 加上地圖控制的功能.

var marker = new YMarker(myPoint);
製作一個座標函數 (marker), 使用 myPoint 的座標

marker.addLabel("<blink>Y!</blink>");
座標上顯示的文字, 可以使用 HTML 方式.

var popup_txt = '<div style="width:120px;height:25px;">台北火車站</div>';
設定座標上的更多內容資訊. (當滑鼠在座標區上時, 顯示的更多資訊)

marker.addAutoExpand(popup_txt);
把更多內容資訊加入座標函數 (marker)

map.addOverlay(marker);
顯示座標.

</script>
</body>
</html>

回上頁