于吉吉的技术博客

建造高性能门户网

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  65 随笔 :: 6 文章 :: 149 评论 :: 0 Trackbacks

房产地图google map的初步应用点滴.1)
房产地图google map的初步应用点滴.2)
房产地图google map的初步应用点滴.3)
房产地图google map的初步应用点滴.4)


google Map的交互基本都是事件驱动的,这表示js是通过生成时间来响应交互的,并且处于监听我们设定的事件,每个 Google Maps API 对象都可导出大量已命名的事件。如果程序想要实现某些事件,则会为这些事件注册 Javascript 事件侦听器,并会在通过在 google.maps.event 命名空间中注册 addListener() 事件处理程序接收这些事件时执行相应的代码。

初步的事件响应

google map中的所有对象都可以对用户事件监听并作出响应,用户的事件可以包括鼠标或键盘,对象可以监听以下这几种事件:
'click','dblclick','mouseup','mousedown','mouseover','mouseout'
这些事件看上去很像标准的DOM事件,但这些时间可以在不同的浏览器实现不同的DOM事件模型。

在实现例子之前看看最常用的addListener() 官方api文档:
addListener(instance:Object, eventName:string, handler:Function)
将指定侦听器函数添加到指定对象实例的指定事件名称。传回该侦听器的标识符,该标识符能够与 eventRemoveListener() 配合使用。

简单来说,这个方法有三个参数,包括了一个监听时间的对象,一个等待监听的时间,一个在指定事件发生时调用的函数。

马上来看一个最最简单的例子,用户用鼠标在地图上点击,系统弹出用户点击地图位置的经纬度,够简单吧

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=GBK"/>
<title></title>
<style type="text/css"> 
</style>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
      
var map;
      
var lat = 23.1257424;
      
var lng = 113.37404225;
      
function initialize() {
        
var mapDiv = document.getElementById('map-canvas');
          map 
= new google.maps.Map(mapDiv, {
            center: 
new google.maps.LatLng(lat,lng),
            zoom: 
15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
    google.maps.event.addListener(map, 'click', 
function(event) {
        alert(
"你选择的经度是:"+event.latLng.lat()+"   纬度是:"+event.latLng.lat());
    });
      }
    
</script>
</head>
<body onload="initialize()">
<div id="map-canvas" style="width: 600px; height: 500px"></div>
</body>
</html>

效果



也可以直接访问http://216.24.193.245/eg_map/033001.html,如果没有删掉的话

重点集中在
google.maps.event.addListener(map, 'click', function(event) {
    alert("你选择的经度是:"+event.latLng.lat()+"   纬度是:"+event.latLng.lat());
});
我们选择监听的对象是map,等待监听的事件是'click',当监听对象符合了监听事件后就触发了function

将触发事件获取的参数作为传递的对象

在上面的例子上,我们通过事件的触发获取了event对象,并将event.latLng对象直接显示出来,再看看下面的例子,我们可以访问事件监听器的事件参数,也是一个非常简单的例子,当用户鼠标点击地图时,直接在点击的经纬度处实现一个小图标

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=GBK"/>
<title></title>
<style type="text/css"> 
</style>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
      
var map;
      
var lat = 23.1257424;
      
var lng = 113.37404225;
      
function initialize() {
        
var mapDiv = document.getElementById('map-canvas');
          map 
= new google.maps.Map(mapDiv, {
            center: 
new google.maps.LatLng(lat,lng),
            zoom: 
15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        google.maps.event.addListener(map, 'click', 
function(event) {
            showMarker(event.latLng);
        });
      }
      
function showMarker(location) {
          
var clickedLocation = new google.maps.LatLng(location);
          marker 
= new google.maps.Marker({
              position: location, 
              map: map
          });
      }
    
</script>
</head>
<body onload="initialize()">
<div id="map-canvas" style="width: 600px; height: 500px"></div>
</body>
</html>

效果



地址:http://216.24.193.245/eg_map/033002.html

闭包在事件监听中的使用

在执行事件侦听器时,通常可取的做法是将私有数据和持久性数据附加到对象中。JavaScript 不支持“私有”实例数据,但它支持允许内部函数访问外部变量的闭包。在事件侦听器访问通常不附加到发生事件的对象的变量时,闭包非常有用。
在延续上面的例子,点击出现的图标,弹出一个InfoWindow对象,并显示相关的信息,在事件监听中使用了闭包函数将信息分配给图标,但在信息中并未包含在图标自身内

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=GBK"/>
<title></title>
<style type="text/css"> 
</style>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
      
var map;
      
var lat = 23.1257424;
      
var lng = 113.37404225;
      
var number = 1;
      
function initialize() {
        
var mapDiv = document.getElementById('map-canvas');
          map 
= new google.maps.Map(mapDiv, {
            center: 
new google.maps.LatLng(lat,lng),
            zoom: 
15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        google.maps.event.addListener(map, 'click', 
function(event) {
            showMarker(event.latLng);
            number
++;
        });
      }
      
function showMarker(location) {
          
var clickedLocation = new google.maps.LatLng(location);
          marker 
= new google.maps.Marker({
              position: location, 
              map: map
          });
          attachSecretMessage(marker,number);
      }
    
function attachSecretMessage(marker) {
      
var infowindow = new google.maps.InfoWindow({ content: "网易房产地图:你是第"+number+"个图标"});
      google.maps.event.addListener(marker, 'click', 
function() {
        infowindow.open(map,marker);
      });
    }

    
</script>
</head>
<body onload="initialize()">
<div id="map-canvas" style="width: 600px; height: 500px"></div>
</body>
</html>



地址:http://216.24.193.245/eg_map/033003.html

关闭监听

关闭监听非常简单,只需调用到一个函数,removeListener(listener:MapsEventListener) ,删除应由上述 eventAddListener 传回的指定侦听器。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=GBK"/>
<title></title>
<style type="text/css"> 
</style>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
      
var map;
      
var lat = 23.1257424;
      
var lng = 113.37404225;
      
var listener;
      
function initialize() {
        
var mapDiv = document.getElementById('map-canvas');
          map 
= new google.maps.Map(mapDiv, {
            center: 
new google.maps.LatLng(lat,lng),
            zoom: 
15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        listener 
= google.maps.event.addListener(map, 'click', function(event) {
            showMarker(event.latLng);
        });
      }
      
function showMarker(location) {
          
var clickedLocation = new google.maps.LatLng(location);
          marker 
= new google.maps.Marker({
              position: location, 
              map: map
          });
      }
      
function stoplistener(){
        google.maps.event.removeListener(listener);
      }
      
function startlistener(){
        listener 
= google.maps.event.addListener(map, 'click', function(event) {
            showMarker(event.latLng);
        });
      }
    
</script>
</head>
<body onload="initialize()">
<div id="map-canvas" style="width: 600px; height: 500px"></div>
<href="#this" onclick="stoplistener()">关闭监听</a> <href="#this" onclick="startlistener()">重启监听</a> 
</body>
</html>



地址:http://216.24.193.245/eg_map/033005.html

应用实例

下面来看一个有趣一点的实例,其中涉及到UI组件的构建,可以参考 房产地图google map的初步应用点滴.2),相比起上面得简单无味的例子稍微多了一点点的复杂

先看看效果吧,点击图标,出现一个bar,把鼠标移动到bar上,发现里面的信息出现了变化,再点击bar,bar条进行了隐藏
地址:http://216.24.193.245/eg_map/033004.html
如果地址不能使用,就copy下面的代码吧

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=GBK"/>
<title></title>
<style type="text/css"> 
@import url("http://img1.cache.netease.com/cnews/css07/style.css");
@import url("http://img1.cache.netease.com/cnews/img09/channel_nav.css");
@import url("http://xf.house.163.com/product/css/ydmap.css");
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
      
var map;
      
var lat = 23.1257424;
      
var lng = 113.37404225;
      
function initialize() {
        
var mapDiv = document.getElementById('map-canvas');
          map 
= new google.maps.Map(mapDiv, {
            center: 
new google.maps.LatLng(lat,lng),
            zoom: 
15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        
var marker = new google.maps.Marker({
              position: 
new google.maps.LatLng(lat,lng), 
              map: map
         });
        google.maps.event.addListener(marker, 
"click"function(e) {
            customLabel 
= new CustomLabel(marker.getPosition());
            google.maps.event.addListener(customLabel, 
"mouseover"function(e) {
            document.getElementById(
"hbprice").innerHTML="网易房产地图:1";
            });
            google.maps.event.addListener(customLabel, 
"mouseout"function(e) {
            document.getElementById(
"hbprice").innerHTML="网易房产地图:2";
            });
            google.maps.event.addListener(customLabel, 
"click"function(e) {
            document.getElementById(
"housebar").style.display="none";
            });
        });        
        }
    
        
function CustomLabel(latlng) {
            
this.latlng_ = latlng;
            
this.setMap(map);
        }

        CustomLabel.prototype 
= new google.maps.OverlayView();

        CustomLabel.prototype.draw 
= function() {
            
var me = this;
            
var div = this.div_;
            
if (!div) {
                
var content = "<div id='housebar' class='nameBoxOut'><div onmouseover='' onmouseout='' class='nameBox2'><div id='hbprice' class='nameBoxbg' onclick=''>网易房产地图</div><span class='rbg'></span></div></div>";
                div 
= this.div_ = document.createElement('DIV');
                div.style.position 
= "absolute";
                div.innerHTML 
= content;
                
//这个div的对象需要Listener事件,必须先用trigger(me)先进行侦听
                google.maps.event.addDomListener(div, "mouseover"function(event) {
                    google.maps.event.trigger(me, 
"mouseover");
                });
                google.maps.event.addDomListener(div, 
"mouseout"function(event) {
                    google.maps.event.trigger(me, 
"mouseout");
                });
                google.maps.event.addDomListener(div, 
"click"function(event) {
                    google.maps.event.trigger(me, 
"click");
                });
                
var panes = this.getPanes();
                panes.overlayImage.appendChild(div);
            }
            
//计算存放可拖动地图的 DOM 元素中指定地理位置的像素坐标
            var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
            
if (point) {
                point.y 
= point.y + -10; point.x = point.x + 0;
                div.style.left 
= point.x + 'px';
                div.style.top 
= point.y + 'px';
            }
        };
        CustomLabel.prototype.remove 
= function() {
            
if (this.div_) {
                
this.div_.parentNode.removeChild(this.div_);
                
this.div_ = null;
            }
        };
        CustomLabel.prototype.getPosition 
= function() {
            
return this.latlng_;
        };

        google.maps.event.addDomListener(window, 'load', initialize);
    
</script>
</head>
<body style="">
<div id="map-canvas" style="width: 600px; height: 400px"></div>
</body>
</html>



首先是对marker进行click监听,当触发了监听,则构建了一个customLabel = new CustomLabel(marker.getPosition())对象,在构建的同时又对customLabel对象进行了mouseover,mouseout,click监听,我们在这里构建了2层的监听事件,所以在CustomLabel对象中trigger(me)的监听

google.maps.event.addDomListener(div, "mouseover", function(event) {
    google.maps.event.trigger(me, "mouseover");
});
google.maps.event.addDomListener(div, "mouseout", function(event) {
    google.maps.event.trigger(me, "mouseout");
});
google.maps.event.addDomListener(div, "click", function(event) {
    google.maps.event.trigger(me, "click");
});

在监听到触发指定事件,"mouseover"后的所有参数都以参数的形式传递到监听器中。

如果你也在进行google map的开发,欢迎赐教和讨论,建了个qq群:11029590

posted on 2011-03-30 16:58 陈于喆 阅读(25970) 评论(0)  编辑  收藏 所属分类: web开发Google Map开发

只有注册用户登录后才能发表评论。


网站导航: