Tad 教材網 - 線上書籍

:::

\[982\]PHP網站開發 進階應用技巧
=====================

[![](http://tad0616.net/uploads/dl.gif)](http://120.115.2.76/tad/tad_book3/file/9802/16.zip)

### 一、Gmap基本結構

1.申請金鑰：<http://code.google.com/intl/zh-TW/apis/maps/signup.html>  
 2.API手冊：<http://code.google.com/intl/zh-TW/apis/maps/documentation/reference.html>  
 3.API範例：[http://code.google.com/apis/ajax/playground/#map\_simple](http://code.google.com/apis/ajax/playground/#map_simple)  
 4.頁面檔頭以「標準相容模式」呈現網頁，在不同瀏覽器之間的行為較為統一，在 XHTML 文件中加入 VML 命名空間，讓每個行為在 IE中都可以正常運作 ：

5.套用金鑰，並載入Google Map第二版的API。Gmap的座標：（緯度,經度）：

<font color="#3366ff"><script type="text/javascript" src="http://www.google.com/jsapi?key=金鑰"></script>  
 <script type="text/javascript">  
 google.load("maps", "2");  
 //頁面載入完成後，執行以下函數（定位地圖起點）  
 function initialize() {  
 var map = new google.maps.Map2(document.getElementById("my\_map"));  
 map.setCenter(new google.maps.LatLng(23.009513 , 120.211242), 17);  
 }  
 google.setOnLoadCallback(initialize);  
 </script></font>

6.為避免耗損記憶體，離開頁面時，請加入 onunload="GUnload()"

### 二、加上標記（請放到initialize()之中）

<font color="#3366ff">var point = new GLatLng(23.009513 , 120.211242);  
 map.addOverlay(new Gmarker(point));</font>

### 三、地圖屬性

G\_NORMAL\_MAP（一般）、G\_SATELLITE\_MAP（衛星）、G\_HYBRID\_MAP（混合）、G\_PHYSICAL\_MAP（地形）、G\_DEFAULT\_MAP\_TYPES（這三種類型的陣列）

<font color="#3366ff">map.setMapType(地圖屬性);</font>

### 四、資訊視窗（地圖屬性勿用G\_DEFAULT\_MAP\_TYPES）

<font color="#3366ff">map.openInfoWindow(point, "這裡就是延平國中啦～");  
 map.openInfoWindowHtml(point, "<b>這裡就是延平國中啦～<b>");</font>

### 五、\[控制項\]地圖控制項目（用addControl()來新增控制項）

1.GLargeMapControl（大型平移/縮放控制項）、GSmallMapControl （小型平移/縮放控制項。按照預設）、GSmallZoomControl （小型縮放控制項）。  
 2.GScaleControl - 地圖比例尺  
 3.GMapTypeControl（切換地圖）、removeMapType（刪按鈕）、addMapType（加按鈕）  
 4.GOverviewMapControl - 位於畫面角落、可摺疊的總覽地圖  
 5.GHierarchicalMapTypeControl （自訂控件用的）

<font color="#3366ff">map.addControl(new GLargeMapControl());  
 map.removeMapType(G\_SATELLITE\_MAP);  
 map.addMapType(G\_PHYSICAL\_MAP);</font>

### 六、\[控制項\]調整地圖控制項目位置（用GControlPosition()來新增控制項）

G\_ANCHOR\_TOP\_RIGHT（上右）、G\_ANCHOR\_TOP\_LEFT（上左）、G\_ANCHOR\_BOTTOM\_RIGHT（下右）、G\_ANCHOR\_BOTTOM\_LEFT（下左）

<font color="#3366ff">var topleft=new GControlPosition(G\_ANCHOR\_TOP\_LEFT, new GSize(50,5));  
 map.addControl (new GMapTypeControl(),topleft);</font>

### 七、\[事件\]顯示中心點座標

<font color="#3366ff">GEvent.addListener(map, "moveend", function() {  
 var center = map.getCenter();  
 document.getElementById("message").innerHTML = center.toString();  
 });  
 <div id='message'></div></font>

### 八、\[事件\]為可移動的節點加入資訊

1.mousedown：滑鼠按下時  
 2.mouseup：放開滑鼠時  
 3.click：按一下滑鼠時  
 4.dragstart：開始拖曳標記時  
 5.drag：拖曳標記時  
 6.dragend：結束拖曳標記時

<font color="#3366ff">var marker = new Gmarker(point , {draggable: true});  
 GEvent.addListener(marker, "dragstart", function() {  
 //移動時，要做的事情  
 map.closeInfoWindow();  
 });  
 GEvent.addListener(marker, "dragend", function() {  
 //移動後要做的事情  
 });</font>

### 九、自訂標記外觀

1.圖示下載：<http://code.google.com/p/google-maps-icons/>

<font color="#3366ff">var myIcon = new Gicon(G\_DEFAULT\_ICON); //定義標記圖示  
 myIcon.image = "icons/school.png"; //圖示的前景圖片網址。  
 myIcon.iconSize = new GSize(32, 37); //圖示的前景圖片大小（以像素為單位）。  
 myIcon.iconAnchor = new GPoint(16, 37); //此圖示錨定至地圖的位置（相對於圖示圖片左上角）  
 myIcon.infoWindowAnchor = new Gpoint(16,37); //資訊視窗錨定至此圖示的位置（相對於圖示圖片左上角）</font>

<font color="#3366ff">markerOptions = { icon: myIcon ,draggable: true };  
 var marker=new GMarker(point,markerOptions);</font>

### 十、頁籤資訊視窗

<http://code.google.com/intl/zh-TW/apis/maps/documentation/reference.html#GInfoWindowOptions>

<font color="#3366ff">InfoWindowOptions={maxWidth:150}  
   
 var tab1 = new GInfoWindowTab("標籤名稱1", "內容1");  
 var tab2 = new GInfoWindowTab("標籤名稱2", "內容2");  
 var infoTabs = \[tab1,tab2\];  
   
 marker.openInfoWindowTabsHtml(infoTabs,InfoWindowOptions);</font>

:::