:::

16. Google Map初探

一、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);


:::

搜尋


書籍目錄

展開 | 闔起

線上使用者

22人線上 (8人在瀏覽線上書籍)

會員: 0

訪客: 22

更多…