網站頁面
課程
成員
一般
主題 1
主題 2
主題 3
主題 4
主題 5
主題 6
主題 7
主題 8
主題 9
主題 10
主題 11
主題 12
主題 13
主題 14
主題 15
主題 16
主題 17
主題 18
Lesson1：製作您第一個Internet地圖
向Google註冊，申請一個Key，一個最簡單的WebGIS地圖。
l Google Maps API，讓妳embed Google Maps到您自己設計的網頁(Google Maps並不對所有的流覽器相容。現在Google Maps支援的流覽器版本是IE5.5以上的版本，它不支持IE5.0)。首先，你必須要有一個 Google 地圖 API 的 key. 你可以在 http://www.google.com/apis/maps/signup.html 獲得，比如你想要把 Google 地圖放在 http://gis.nhlue.edu.tw/gmap/ 這個位置, 那你就用這個網址去申請你的 Google 地圖 key。
- 您如果沒有做過，當然要先建立一個Google 帳戶，這比建立一個Yahoo帳戶還要簡單。
- 先選建立一個帳戶
U:shine@mail.nhlue.edu.tw
P:shinelin
輸入基本資料
輸入完後會寄一個認證到填入的email信箱確認帳號
確認後就會送上一個認證Key了
- 當場系統就會給你一個 Google 地圖的 key 和一個範例如下, 紅色的部份就是你的 Google 地圖 key, 這字串要放在你有 Google 地圖的網頁 <head> 和 </head> 欄之間. (事實上也可以放在其他地方, 但是不要製造混亂, 還是固定的放在 <head> 和 </head> 欄之間才不會弄錯).你可以在您申請的網頁中直接使用這個範例 (別忘了更換你的 Google 地圖 key)。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAEP4JfY_0WuuqO-_le09ZJhRe7Zh1I3Boyx5c-cn-rdkhkujO2RTxBvMLBsPw8as-S4BCUf9utOWKrQ"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAEP4JfY_0WuuqO-_le09ZJhRe7Zh1I3Boyx5c-cn-rdkhkujO2RTxBvMLBsPw8as-S4BCUf9utOWKrQ"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
將檔案複製到伺服器上即可執行 http://gis.nhlue.edu.tw/gmap/sample1.htm
| 補充：onload指定程式載入時的執行function，程式會顯得整齊，但可以省略；onunload指定程式的卸載，與變數的指定記憶體的管理等都有關係，不要省略。 <head> <script type="text/javascript"> function load() { if (GBrowserIsCompatible()) { ... } } </script> </head> <body onload="load()" onunload="GUnload()"></body> |
如果您沒有網路的伺服器可以執行的話，也可以在本機上執行
| <!--http://127.0.0.1 本機開發用--> <!--script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAWtl6yJsPRoCpAZIy7GsxtBSewxY428YsTG0-x1erdWxdrvrUHRSQMatDb_0kK6dQ24etRHQ4yrTBeQ" type="text/javascript"></script--> |
最後修改: 2013年 12月 18日(三.) 16:49