您正使用訪客身分瀏覽 (登入)
頁面路徑

Lesson2：需要注意與可以更改的說明

1.GoogleMaps第一版已經不能使用了

http://gis.nhlue.edu.tw/gmap/sample0.htm

市面上目前的書大多是第一版時的參考書目，目前已經不能使用了，Google Map已經升級至 v2 的版本，以下是辨別網路上到底是哪個版本的最簡單方法。

  • 使用 v2 版本時, API 的 key 要註明是 v=2, http://maps.google.com/maps?file=api&v=2&key=abcdefg. 第一版是 v=1.
  • GMap物件 改成 GMap2.
  • v1 版本可以放 setMapType 在 centerAndZoom 之前. v2 版本已經不可以這麼做.
  • Google 建議改使用 setCenter, 而不要使用 centerAndZoom.
    1. centerAndZoom(GPoint(緯度, 經度), [+ 縮小(遠)] -> [- 放大(近)]);
    2. setCenter(GLatLng(經度, 緯度), [+ 放大(近)] -> [- 縮小(遠)]);
  • 舊名 G_MAP_TYPE, G_SATELLITE_TYPE, G_HYBRID_TYPE 改成 G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP.

2.    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAEP4JfY_0WuuqO-_le09ZJhRe7Zh1I3Boyx5c-cn-rdkhkujO2RTxBvMLBsPw8as-S4BCUf9utOWKrQ"
      type="text/javascript"></script>

這個是你專屬的 Google 地圖 Key. 如果你沒有或是有錯誤的 Google 地圖 Key, 那網頁就會出現這種錯誤, 並無法執行.

error.jpg

3.<div id="map" style="width: 500px; height: 400px"></div>

這個是顯示地圖大小的設定. 你可以隨心所欲的更改地圖的寬度 (width) 和高度 (height).
比如更改寬度和高度到 800. http://gis.nhlue.edu.tw/gmap/sample2.htm

4.var map = new GMap2(document.getElementById("map"));

第一個 'map' 是程式的定義. 用於程式內. 如果是 var happymap = new GMap2(document.getElementById("map"));, 那下面的程式都必須是 happymap, 像這樣 happymap.setCenter(new GLatLng(37.4419, -122.1419), 13);

第二個 'map' 是地圖顯示的定義. 用於顯示地圖. 如果上面第二點的 id 是 <div id="taipei_map" style="width: 500px; height: 400px"></div>, 那這裡就是 var map = new GMap2(document.getElementById("taipei_map"));

如此的定義是讓網頁可以同時顯示兩個以上的地圖. http://gis.nhlue.edu.tw/gmap/sample3.htm

5.map.addControl(new GSmallMapControl());

這裡是讓你可以自由的加入喜好的地圖控制. GSmallMapControl 的位置可以有四種的替換可能, GLargeMapControl, GSmallMapControl, GSmallZoomControl 和 GMapTypeControl.

http://gis.nhlue.edu.tw/gmap/sample4.htm
　

補充：中文繁體應該設成Big5，否則應該是UTF-8的UniCode，要是中英文混用的話，系統就會出現亂碼，可以利用不同的Table，或是其它的網頁物件分隔開來，這樣系統設定的Unicode才可以正確的顯示出中英文字，不出現亂碼。

其中 GMapTypeControl 可以和其他三個混合使用.
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

但其他三個 (GLargeMapControl, GSmallMapControl, 和 GSmallZoomControl) 你只可以選其一.

http://gis.nhlue.edu.tw/gmap/sample5.htm

6.map.setCenter(new GLatLng(37.4419, -122.1419), 9);

這是初始地圖的顯示位置和縮放大小設定. 比如把台北火車站當做初始地圖的顯示位置, 並設定縮放大小為 9 (可以從 0 到 17 設定).

http://gis.nhlue.edu.tw/gmap/sample6.htm

除了預設的道路地圖以外，也可以直接設定為空照圖顯示(台北火車站為中心). map.setMapType(G_SATELLITE_MAP) 或簡短一些 map.setCenter(new GLatLng(37.4419, -122.1419), 15, G_SATELLITE_MAP);

http://gis.nhlue.edu.tw/gmap/sample7.htm

Google Map API 第二版新增了索引地圖GOverviewMapControl

http://gis.nhlue.edu.tw/gmap/sample8.htm

 // ======== Add a map overview ==========
var ovcontrol = new GOverviewMapControl(new GSize(200,200));
map.addControl(ovcontrol);
// ======== adjust the positioning of the overview ========
function positionOverview(x,y) {
var omap=document.getElementById("map_overview");
omap.style.left = x+"px";
omap.style.top = y+"px";
omap.firstChild.style.border = "1px solid gray";
omap.firstChild.firstChild.style.left="4px";
omap.firstChild.firstChild.style.top="4px";
omap.firstChild.firstChild.style.width="190px";
omap.firstChild.firstChild.style.height="190px";
}
// ======== get a reference to the GMap2 ===========
var ovmap = ovcontrol.getOverviewMap();
// ======== Cause the overview to be positioned AFTER IE sets its initial position =======
setTimeout("positionOverview(575,50)",1);
// ======== change the overview map type AFTER the overview finisges initializing =====
setTimeout("ovmap.setMapType(G_SATELLITE_MAP);",1);
　

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