[Map]Google Map学习(二) 简单的Google Map,Google Map事件

baacloud免费翻墙vpn注册使用

      上一节已经学习了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.9493116.3975), 13);  
            GEvent.bind(
this.map, "click"thisthis.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.9493116.3975), 13);
            
var myEventListener = GEvent.bind(this.map, "click"thisfunction(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未定义的错误,请刷新一遍,火狐下是正常的)

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏