finalevil's blog: [程式]Google Maps API V3 不停觸發的bounds

呼...自從去年(還是前年？)參加資策會Web2.0比賽的那段日子用過Google Maps API，已經很久沒有再碰過了，當時使用的是V2版本的API，沒想到一眨眼就出了V3版本。

在V3版本的Google Map省略了申請key的惱人步驟，只要加上需要reference的javascript檔案就可以使用Google Map。畢竟每次在開發機和對外主機上都要切換key，也是頗為煩人的XD

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

原本想說既然這麼方便，那就直接用V3版本的API進行開發吧！可是用起來似乎有些問題？也許這不算是程式本身的問題，只是設計哲學的差異吧，但是這可能會造成原本很單純的工作變的複雜，因此我最後還是乖乖跑回去用V2版本的API了。在這裡紀錄我遇到的問題：

bounds_changed：
Map Event，當地圖顯示的區域變更就會觸發此一事件。聽起來似乎沒什麼問題，我們用滑鼠拉動地圖，地圖位置變更，接著觸發bounds_changed事件。
但是實際使用的時候會發現這個evnet執行次數不只一次，每次我們用滑鼠拖拉地圖的過程中，bounds_changed事件就已經被「不停的」觸發了。

因此，建議在dragstart event中移除bounds_changed事件，當拖拉動作處理完畢，地圖真正到達你想瀏覽的定點時，再在dragend event新增bounds_changed事件。
HTML包含了一個用來顯示地圖的DIV和一個顯示目前地圖顯示範圍的經緯度的DIV：

<body onload="initialize()">
  <div id="map_canvas" style="width:400px; height:400px"></div>
  <div id="boundinfo">dddd</div>
</body>

javascript：

<script type="text/javascript">
var map;
var listener;
function initialize() {
 
	 var latlng = new google.maps.LatLng(-34.397, 150.644);
	 var myOptions = {
	 
		zoom: 8,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	 };
	 map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	 
	 google.maps.event.addListener(map, 'dragstart', onDragstart);
	 google.maps.event.addListener(map, 'dragend', onDragend);
	 listener = google.maps.event.addListener(map, 'bounds_changed', onBounds_changed);	 
 }
 
 function onDragstart(){

 	google.maps.event.removeListener(listener);
 }
 
 function onDragend(){
 
 	listener = google.maps.event.addListener(map, 'bounds_changed', onBounds_changed); 
 	
 }
	
 function onBounds_changed(){
 
 	var bounds = map.get_bounds();
 	document.getElementById("boundinfo").innerHTML=
		'bounds:'+bounds.getSouthWest()+','+bounds.getNorthEast();
 }
	
	
</script>