地圖日記課程：Google Map API

前天請到地圖日記技術長Andy為同事講解示範Google Map API的玩法，
大家都收穫良多，來分享一下。

叫出地圖

首先引入Gmap，Key要向Google Map申請，每個網域都有特定的值
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABCDEFG">script>
接下來將Map2物件實體化，並塞在前端div=map的標籤內，
用setCenter方法，傳入經緯度及地圖比例(1~18)，就可以將地圖叫出
var map = new google.maps.Map2(document.getElementById("map"));
map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);
加上標記(marker)
用Gmarker，GMarker(point,  icon?,  inert?)，
第一個參數傳入一個Gpoint或GLatLng，第二個是傳入icon類型，
Gmarker實體化，再用map.addOverlay(marker)，將標記放在地圖上。
icon可以換成自己想要的圖或者選擇預設
icon的定位設定跟iconSize及iconAnchor，如果
iconoff.iconSize = new GSize(40, 40);
iconoff.iconAnchor = new GPoint(20, 40);
開對話視窗

用map.openInfoWindow(point,  node, opts?)或openInfoWindowHtml(point,  html, opts?)
或GinfoWindow開出視窗，可設定各種視窗及效果


將鏡頭拉到某一個點

map.panTo(center)，center傳入一個GLatLng(lat,  lng,  unbounded?)或Gpoint(x,y)當作中心點，
因此如果要做出動態拉鏡頭的效果，可以將一串經緯度傳入陣列，再用setTimeout
設定依時間順序序傳入陣列的經緯度值。
setTimeout("javascript statement",milliseconds);
另外，eval()也很好用，
後端回傳的responseText如果用JSON格式，塞入eval(string)中，可以直接成為陣列
landmarkdata = eval('(' + o.responseText + ')');
標定視窗界線，讓使用者拉動到鏡頭外時可以重新傳入新的經緯度值

必須以事件(GEventListener)監聽地圖的四個角的位置(GBound)，
當改變時，重新到資料庫取出新的使用者經緯度資料，並重繪地圖。