Mikel
上一节已经学习了Google Map的基础。首先回顾一下上一节的基本内容
地图对象的创建：var map = new GMap2(document.getElementById("map"));
设置map的默认显示形式：map.setMapType(G_HYBRID_MAP);
设置地图的位置（这是必须的）：map.setCenter(new GLatLng(22.4977,113.9208),19);
添加一个信息窗口：map.openInfoWindowHtml(map.getCenter(),document.createTextNode("北科创业大厦"));
以上内容都非常的简单，但是仅仅是显示了一张地图，非常单一。
这一节，我们主要学习地图中的事件，并且通过事件做一些简单的交互。
Google Map的命名空间
到现在大家可能已经发现了Google Map API中的类都带有一个大写字母G，G是Google Map API的顶级命名空间，它的原型是google.maps.*,比如GMap2也可以写成google.maps.Map2。
地图事件
JavaScript是”事件驱动的“，也就是说JavaScript通过事件来响应交互。比如用户希望在某个DOM元素移动鼠标时，发生一 些什么，那么在这个DOM元素上移动鼠标就是一个事件，我们要做的就是监听这个事件，为这个事件注册监听器，也就是写一个监听函数，用户所希望的东西，我 们都可以在函数中进行表达。
Google 地图 API 通过为地图 API 对象定义自定义事件而添加到此事件模型中。虽然不同浏览器中的DOM事件不同，但是Google Map API已经帮包含跨浏览器的机制，我们无需再因为用户使用不同浏览器而苦恼了。
注册事件监听器
通过使用GEvent命名空间中的实用工具函数注册事件监听器，来处理Google Map API中的一些事件。每个对象都包含很多已有的事件，例如GMap2对象的click、dbclick事件。
注册事件的方法很简单：GEvent.addListener(object,event,function)，三个参数分别对象，待监听事件，事件调用函数。例如：
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title>
<script type="text/JavaScript" src="http://ditu.google.cn/maps?file=api&v=2">
</script> <script type="text/javascript">
function load() {
if (GBrowserIsCompatible()) {
var px = 30.6562; var py = 104.0639; var cx = px; var cy = py; var zoom = 12; var map = new GMap2(document.getElementById("map")); var point = new GLatLng(px, py); map.setCenter(point,zoom);
} /* 获得当前点击的地理坐标 */ GEvent.addListener(map, "click", function(marker, point) { if (point) { px = point.lat(); py = point.lng(); zoom = map.getZoom(); document.getElementById("lat").value = px; document.getElementById("lng").value = py; } }); /* zoomend地图到达新的缩放级别时会触发此事件。事件处理程序接收先前的缩放级别和新缩放级别作为参数。 */ GEvent.addListener(map, "zoomend", function() { zoom = map.getZoom(); //document.getElementById("zoom").value = zoom; }); /* moveend结束地图视图的更改时会触发此事件。拖动或放大/缩小都会触发此事件 */ GEvent.addListener(map, "moveend", function() { var center = map.getCenter(); cx = center.lat(); cy = center.lng(); document.getElementById("lat").value = cx; document.getElementById("lng").value = cy; document.getElementById("centerLat").value = cx; document.getElementById("centerLng").value = cy; document.getElementById("zoom").value = zoom; }); document.getElementById("lat").value = px; document.getElementById("lng").value = py; document.getElementById("centerLat").value = cx; document.getElementById("centerLng").value = cy; document.getElementById("zoom").value = zoom; } window.onload = load; </script></head><body> <div> 当前经度：<input type="text" id="lat"/><br /> 当前纬度：<input type="text" id="lng"/><br /> 中心经度：<input type="text" id="centerLat"/><br /> 中心纬度：<input type="text" id="centerLng"/><br /> 当前倍率：<input type="text" id="zoom"/> </div> <div style="width:500px; height:500px;" id="map"></div></body></html>(如果在IE下出现GMap2未定义的错误，请刷新一遍，火狐下是正常的)
将事件绑定到对象方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <script type="text/javascript" src="http://ditu.google.cn/maps?file=api&v=2"> </script> <script type="text/javascript"> function MyApplication() { this.counter = 0; this.map = new GMap2(document.getElementById("map")); this.map.setCenter(new GLatLng(39.9493, 116.3975), 13); GEvent.bind(this.map, "click", this, this.onMapClick); } MyApplication.prototype.onMapClick = function() { this.counter++; alert("这是您第" + this.counter + " " + "次点击"); } window.onload = function(){ var application = new MyApplication(); } </script></head><body> <div id="map" style="width:500px; height:500px;"></div></body></html>(如果在IE下出现GMap2未定义的错误，请刷新一遍，火狐下是正常的)
监听DOM事件
Google地图API事件模型创建并管理自己的自定义事件。但是，DOM也会根据当前使用的特定浏览器事件模型创建和调度自己的事件。如果你希望捕获这 些事件，Google地图API提供的独立于浏览器的包装器可以监听和绑定DOM事件而不需要自定义代码。
GEvent.addDomListener()方法为DOM节点上的DOM注册事件处理程序。同样，GEvent.bindDom()方法允许你给类实例上的DOM事件注册事件处理程序。
删除事件监听器
不再需要事件监听器时，应将其删除。甚至在事件只需触发一次的情况下，也可能需要删除。删除闭包内的匿名函数所定义的事件监听器可能很困难。但是，addListener()、addDomListener()、bind() 和 bindDom() 函数会返回 GEventListener 句柄，可用来最终取消注册处理程序。
下面的示例通过在地图上放置标记来响应点击。任何后续点击都可删除事件监听器。请注意，这会导致不再执行 removeOverlay() 代码。另请注意，您甚至可以从事件监听器自身内部删除事件监听器。
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <script type="text/javascript" src="http://ditu.google.cn/maps?file=api&v=2"> </script> <script type="text/javascript"> function MyApplication(){ this.counter = 0; this.map = new GMap2(document.getElementById("map")); this.map.setCenter(new GLatLng(39.9493, 116.3975), 13); var myEventListener = GEvent.bind(this.map, "click", this, function(overlay, latlng) { if (this.counter == 0) { if (latlng) { this.map.addOverlay(new GMarker(latlng)) this.counter++; } else if (overlay instanceof GMarker) { this.removeOverlay(marker); } } else { GEvent.removeListener(myEventListener); } }); } window.onload = function(){ var application = new MyApplication(); } </script></head><body onunload = "GUnload()"> <div id="map" style="width:500px; height:500px;"> </div></body></html>(如果在IE下出现GMap2未定义的错误，请刷新一遍，火狐下是正常的)
