上方廣告

2011年5月20日 星期五

GoogleMap 判斷多個座標位置動態改變Zoom Size

最近有個需求就是一個地圖畫面可以隨意的讓使用者加入多個地標,而且要在第一次載入畫面的同時自動調整地圖大小來將所有地標呈現在可視範圍內。

在網路上找了許多文章,但幾乎(或者我沒找到)都是用GoogleMap API V2來實現,但是此次我試的例子是使用GoogleMap API V3來完成,因此沒辦法適用,在這裡我先說明一下V2的版本如何來完成。
//首先宣告 GLatLngBounds物件
var bounds = new GLatLngBounds();
//跑回圈將所有的座標加入
for(var i = 0; i < 10; i++){
    bounds.extend(new GLatLng(lat,lng)); 
}
//此方法可取得適當的地圖大小
map.getBoundsZoomLevel(bounds);
//此方法可取地圖中心
bounds.getCenter();

V3版本,人家講了一大堆,結果都是Copy的根本無法使用,最後來是乖乖的上Google API 找答案比較快,解決方法如下(jQuery使用的是先前自己擴展的方法,這裡不再敘述)
//在V3的版本請改用此物件
var bounds = new google.maps.LatLngBounds();

for (var i = 0; i < 10; i++) {
    //在API中說到extend【延伸此界限以包含指定的點】,這個意思是加入多個座標
    bounds.extend(new google.maps.LatLng(lat, lng));
}
//重新設定Zoom Size
$(gmap1).getMap3().fitBounds(bounds);