線上書籍

Home

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

一、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
4.頁面檔頭以「標準相容模式」呈現網頁，在不同瀏覽器之間的行為較為統一，在 XHTML 文件中加入 VML 命名空間，讓每個行為在 IE中都可以正常運作 ：

<!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" xmlns:v="urn:schemas-microsoft-com:vml">

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

<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>

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

<body onunload="GUnload()">
<div id="my_map" style="width: 700px; height: 400px"></div>

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

var point = new GLatLng(23.009513 , 120.211242);
map.addOverlay(new Gmarker(point));

三、地圖屬性

G_NORMAL_MAP（一般）、G_SATELLITE_MAP（衛星）、G_HYBRID_MAP（混合）、G_PHYSICAL_MAP（地形）、G_DEFAULT_MAP_TYPES（這三種類型的陣列）

map.setMapType(地圖屬性);

四、資訊視窗（地圖屬性勿用G_DEFAULT_MAP_TYPES）

map.openInfoWindow(point, "這裡就是延平國中啦～");
map.openInfoWindowHtml(point, "<b>這裡就是延平國中啦～<b>");

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

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

map.addControl(new GLargeMapControl());
map.removeMapType(G_SATELLITE_MAP);
map.addMapType(G_PHYSICAL_MAP);

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

G_ANCHOR_TOP_RIGHT（上右）、G_ANCHOR_TOP_LEFT（上左）、G_ANCHOR_BOTTOM_RIGHT（下右）、G_ANCHOR_BOTTOM_LEFT（下左）

var topleft=new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(50,5));
map.addControl (new GMapTypeControl(),topleft);

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

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

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

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

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

九、自訂標記外觀

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

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); //資訊視窗錨定至此圖示的位置（相對於圖示圖片左上角）

markerOptions = { icon: myIcon ,draggable: true };
var marker=new GMarker(point,markerOptions);

十、頁籤資訊視窗

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

InfoWindowOptions={maxWidth:150}

var tab1 = new GInfoWindowTab("標籤名稱1", "內容1");
var tab2 = new GInfoWindowTab("標籤名稱2", "內容2");
var infoTabs = [tab1,tab2];

marker.openInfoWindowTabsHtml(infoTabs,InfoWindowOptions);