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

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

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

    
    

    




    







												


        

    
	

    
	
    
		
    
			
				
    于吉吉的技術博客
    
				
    建造高性能門戶網
    
			    		
		
    
	
    

    

    
	
    
		
    
			
 
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>
    
    <a href="#this" onclick="stoplistener()">關閉監聽</a> <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 陳于喆 閱讀(26593) 評論(0)  編輯  收藏  所屬分類: web開發 、Google Map開發 
	
    

    







    
	    
    




    








    

				

    




    







    
        
	



主站蜘蛛池模板：
免费无遮挡无码永久视频|
国产成人精品免费视频软件|
亚洲入口无毒网址你懂的|
日本大片在线看黄a∨免费|
久久国产精品免费|
亚洲欧洲日韩国产|
亚洲AⅤ优女AV综合久久久|
久久精品视频免费|
亚洲AV无码一区二区三区网址|
亚洲熟妇丰满多毛XXXX|
国产成人免费网站|
a级毛片毛片免费观看久潮|
亚洲色无码专区一区|
亚洲AV无码一区二区二三区软件|
中国在线观看免费高清完整版|
51午夜精品免费视频|
亚洲精品二三区伊人久久|
亚洲午夜久久久久久久久电影网|
最近免费中文字幕4|
三级网站在线免费观看|
女bbbbxxxx另类亚洲|
亚洲人成网站18禁止久久影院|
亚洲日韩欧洲乱码AV夜夜摸|
天天摸天天操免费播放小视频
|
九九免费观看全部免费视频|
亚洲欧洲国产视频|
亚洲日韩乱码中文无码蜜桃臀网站
|
久久久久久精品成人免费图片
|
国产视频精品免费视频|
亚洲AⅤ男人的天堂在线观看|
亚洲AV无码国产精品色午友在线|
四虎永久免费观看|
大地资源二在线观看免费高清
|
国产亚洲精久久久久久无码77777|
国产成人A在线观看视频免费|
精品无码人妻一区二区免费蜜桃|
日本一区二区三区在线视频观看免费|
亚洲色偷偷综合亚洲AV伊人蜜桃|
中文字幕亚洲色图|
亚洲国产精品国自产电影|
91麻豆精品国产自产在线观看亚洲|