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 {
height: 100px;
width: 100px;
}
這裡設定 Yahoo 地圖的大小(事實上, 這個並不是很好的方式. 將在下一個範例使用另一個較方便的方式). #mapContainer 和 <div id="mapContainer"></div> 間的名稱必須要相同. 當然同一個網頁可以使用一個以上的地圖, 只要這兩個是相同的. 比如 #mapTaipei 和 <div id="mapTaipei"></div> 和 #mapSeattle 和 <div id="mapSeattle"></div>. 不一樣的地圖名稱就可以有不一樣的大小.

</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'));
製作 mapContainer 這個地圖物件為 map.

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

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

由這裡可得知, 如果把 mapContainer 這個地圖物件取名為 TaipeiMap 成為 var TaipeiMap = new YMap(document.getElementById('mapContainer'));, 則從這裡以下的程式都需使用 TaipeiMap.addTypeControl();.

map.setMapType(YAHOO_MAP_SAT);
設定地圖的顯示方式. 一般地圖 (YAHOO_MAP_REG), 衛星空照圖 (YAHOO_MAP_SAT), 衛星和道路混合 (YAHOO_MAP_HYB).


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

回上頁