于吉吉的技術博客

建造高性能門戶網

BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合

:: 管理 ::

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

<

2011年3月

>

日

一

二

三

四

五

六

27

28

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

7

8

9

公告

本博客的文章,未注明轉載字樣的均為原創,本著好記性不如爛博客的精神，QQ是34174409，歡迎指教和討論

留言簿(12)

隨筆分類

隨筆檔案

文章檔案

收藏夾

blog

開源社區

jquery
spring
struts

活動

關注我的微薄
郎咸平-網易博客 (rss)

積分與排名

積分 - 470618
排名 - 109

最新評論

1.?re: Javascript eval()使用上需要注意的安全問題[未登錄]
454564564564
--123
2.?re: 淺析MySql二進制日志的應用
單詞打錯了，是expire_logs_days.
--嚴謹的程序員
3.?re: 解決hessian遠程調用連接超時的問題[未登錄]
樓主用的是哪個版本的hessian啊
--aa
4.?re: Javascript eval()使用上需要注意的安全問題[未登錄]
alert(1)
--啊啊
5.?re: 對setTimeout的誤差堆積測試和簡單分析
代碼中： showtime.curr= +new Date();是什么意思，為什么要寫個加號？
--hirain

房產地圖google map的初步應用點滴.3)

房產地圖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 陳于喆閱讀(26596) 評論(0) 編輯收藏所屬分類: web開發、Google Map開發

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: 《lua & ngx_lua 的介紹與應用》對setTimeout的誤差堆積測試和簡單分析 javascript 實現'秒殺，團購'倒計時展示的記錄簡單分析cglib引起的PermSize Space內存溢出 js全局/局部變量的烏龍問題房產地圖google map的初步應用點滴.4) 解答一下幾道筆試題房產地圖google map的初步應用點滴.3) 房產地圖google map的初步應用點滴.2) 房產地圖google map的初步應用點滴.1)