<rt id="bn8ez"></rt>
<label id="bn8ez"></label>
  • 

    • <span id="bn8ez"></span>
    

    <label id="bn8ez"><meter id="bn8ez"></meter></label>
    

    
    

    




    







												


        

    
	

    
	
    
		
    
			
				
    于吉吉的技術博客
    
				
    建造高性能門戶網(wǎng)
    
			    		
		
    
	
    

    

    
	
    
		
    
			
 
BlogJava ::
首頁 ::
新隨筆 ::
聯(lián)系 ::
聚合
 ::
管理 ::


			
			
				

    
	
    
		
    
			
			
			
				 
				65 
				隨筆 ::
				6 文章
				::
				149 評論
				::
				0 Trackbacks
			
		
    
	
    

    

			    		
		
    
	
    

    


    


    
	
					

    
	
	
	
    
		
    
房產(chǎn)地圖google map的初步應用點滴.1)
    
房產(chǎn)地圖google map的初步應用點滴.2)
    
房產(chǎn)地圖google map的初步應用點滴.3)
    房產(chǎn)地圖google map的初步應用點滴.4)

    

    
google Map的交互基本都是事件驅動的，這表示js是通過生成時間來響應交互的，并且處于監(jiān)聽我們設定的事件，每個 Google Maps API 對象都可導出大量已命名的事件。如果程序想要實現(xiàn)某些事件，則會為這些事件注冊 Javascript 事件偵聽器，并會在通過在 google.maps.event 命名空間中注冊 addListener() 事件處理程序接收這些事件時執(zhí)行相應的代碼。
    

    
初步的事件響應
    

    
google map中的所有對象都可以對用戶事件監(jiān)聽并作出響應，用戶的事件可以包括鼠標或鍵盤，對象可以監(jiān)聽以下這幾種事件：
    
'click'，'dblclick'，'mouseup'，'mousedown'，'mouseover'，'mouseout'
    
這些事件看上去很像標準的DOM事件，但這些時間可以在不同的瀏覽器實現(xiàn)不同的DOM事件模型。
    

    
在實現(xiàn)例子之前看看最常用的addListener() 官方api文檔：
    
addListener(instance:Object, eventName:string, handler:Function) 
    
將指定偵聽器函數(shù)添加到指定對象實例的指定事件名稱。傳回該偵聽器的標識符，該標識符能夠與 eventRemoveListener() 配合使用。
    

    
簡單來說，這個方法有三個參數(shù)，包括了一個監(jiān)聽時間的對象，一個等待監(jiān)聽的時間，一個在指定事件發(fā)生時調用的函數(shù)。
    

    
馬上來看一個最最簡單的例子，用戶用鼠標在地圖上點擊，系統(tǒng)彈出用戶點擊地圖位置的經(jīng)緯度，夠簡單吧
    

    

    <!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(    "你選擇的經(jīng)度是："+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("你選擇的經(jīng)度是："+event.latLng.lat()+"   緯度是："+event.latLng.lat());
    
});
    
我們選擇監(jiān)聽的對象是map，等待監(jiān)聽的事件是'click'，當監(jiān)聽對象符合了監(jiān)聽事件后就觸發(fā)了function
    

    
將觸發(fā)事件獲取的參數(shù)作為傳遞的對象
    

    
在上面的例子上，我們通過事件的觸發(fā)獲取了event對象，并將event.latLng對象直接顯示出來，再看看下面的例子，我們可以訪問事件監(jiān)聽器的事件參數(shù)，也是一個非常簡單的例子，當用戶鼠標點擊地圖時，直接在點擊的經(jīng)緯度處實現(xiàn)一個小圖標
    

    

    <!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
    

    
閉包在事件監(jiān)聽中的使用
    

    
在執(zhí)行事件偵聽器時，通常可取的做法是將私有數(shù)據(jù)和持久性數(shù)據(jù)附加到對象中。JavaScript 不支持“私有”實例數(shù)據(jù)，但它支持允許內部函數(shù)訪問外部變量的閉包。在事件偵聽器訪問通常不附加到發(fā)生事件的對象的變量時，閉包非常有用。
    
在延續(xù)上面的例子，點擊出現(xiàn)的圖標，彈出一個InfoWindow對象，并顯示相關的信息，在事件監(jiān)聽中使用了閉包函數(shù)將信息分配給圖標，但在信息中并未包含在圖標自身內
    

    

    <!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: "網(wǎng)易房產(chǎn)地圖:你是第"+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
    

    
關閉監(jiān)聽
    

    
關閉監(jiān)聽非常簡單，只需調用到一個函數(shù)，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>
    
    <a href="#this" onclick="stoplistener()">關閉監(jiān)聽</a> <a href="#this" onclick="startlistener()">重啟監(jiān)聽</a> 
    
    </body>
    
    </html>
    

    

    

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

    
應用實例
    

    
下面來看一個有趣一點的實例，其中涉及到UI組件的構建，可以參考 房產(chǎn)地圖google map的初步應用點滴.2)，相比起上面得簡單無味的例子稍微多了一點點的復雜
    

    
先看看效果吧，點擊圖標，出現(xiàn)一個bar，把鼠標移動到bar上，發(fā)現(xiàn)里面的信息出現(xiàn)了變化，再點擊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="網(wǎng)易房產(chǎn)地圖:1";
    
            });
    
            google.maps.event.addListener(customLabel,     "mouseout", function(e) {
    
            document.getElementById(    "hbprice").innerHTML="網(wǎng)易房產(chǎn)地圖: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=''>網(wǎng)易房產(chǎn)地圖</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監(jiān)聽，當觸發(fā)了監(jiān)聽，則構建了一個customLabel = new CustomLabel(marker.getPosition())對象，在構建的同時又對customLabel對象進行了mouseover，mouseout，click監(jiān)聽，我們在這里構建了2層的監(jiān)聽事件，所以在CustomLabel對象中trigger（me）的監(jiān)聽
    

    
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");
    
});
    

    
在監(jiān)聽到觸發(fā)指定事件，"mouseover"后的所有參數(shù)都以參數(shù)的形式傳遞到監(jiān)聽器中。
    

    
如果你也在進行google map的開發(fā)，歡迎賜教和討論，建了個qq群：11029590
    

    

	
    
	
	
    
		posted on 2011-03-30 16:58 陳于喆 閱讀(26594) 評論(0)  編輯  收藏  所屬分類: web開發(fā) 、Google Map開發(fā) 
	
    

    







    
	    
    




    








    

				

    




    







    
        
	



主站蜘蛛池模板：
亚洲视频一区二区|
亚洲偷偷自拍高清|
亚洲黄色免费电影|
亚洲av日韩aⅴ无码色老头|
国产午夜亚洲精品国产成人小说|
国产成人精品一区二区三区免费|
亚洲天堂2016|
老司机亚洲精品影视www|
男女超爽刺激视频免费播放|
成年女人免费v片|
国产精品青草视频免费播放|
亚洲一级毛片免观看|
亚洲一区二区三区国产精品|
www.免费在线观看|
精精国产www视频在线观看免费|
亚洲伦理一二三四|
亚洲色大成网站www永久男同|
久久久久无码专区亚洲av|
韩国免费一级成人毛片|
91免费福利视频|
婷婷亚洲综合一区二区|
国产免费av一区二区三区|
免费在线观看亚洲|
亚洲精品成人a在线观看|
国产精品视频免费|
中文字幕在线免费观看视频|
亚洲精品无码永久在线观看男男|
亚洲国产国产综合一区首页|
亚洲?V无码乱码国产精品|
亚洲人成电影网站免费|
午夜影院免费观看|
久青草国产免费观看|
亚洲国产三级在线观看|
免费少妇a级毛片人成网|
久久久久国产精品免费免费搜索
|
日韩高清免费观看|
曰批全过程免费视频观看免费软件
|
国产精品免费电影|
国产一精品一AV一免费孕妇|
一级成人a毛片免费播放|
91成人免费福利网站在线|