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

key1.jpg

 

 

  • 您如果沒有做過,當然要先建立一個Google 帳戶,這比建立一個Yahoo帳戶還要簡單。
  • 先選建立一個帳戶

U:shine@mail.nhlue.edu.tw

P:shinelin

輸入基本資料

輸入完後會寄一個認證到填入的email信箱確認帳號

確認後就會送上一個認證Key

key2.jpg

  • 當場系統就會給你一個 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&amp;v=2&amp;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&amp;v=2&amp;key=ABQIAAAAWtl6yJsPRoCpAZIy7GsxtBSewxY428YsTG0-x1erdWxdrvrUHRSQMatDb_0kK6dQ24etRHQ4yrTBeQ" type="text/javascript"></script-->

最後修改: 2013年 12月 18日(三.) 16:49