房产地图google map的初步应用点滴.3)(转)

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

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() 配合使用。

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

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

效果

也可以直接访问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的初步应用点滴.3)(转)的更多相关文章

房产地图google map的初步应用点滴.4)(转)
房产地图google map的初步应用点滴.1) 房产地图google map的初步应用点滴.2) 房产地图google map的初步应用点滴.3) 房产地图google map的初步应用点滴.4) ...
房产地图google map的初步应用点滴.2)(转)
房产地图google map的初步应用点滴.1)房产地图google map的初步应用点滴.2)房产地图google map的初步应用点滴.3) 房产地图google map的初步应用点滴.4) 本来 ...
房产地图google map的初步应用点滴.1)(转)
房产地图google map的初步应用点滴.1)房产地图google map的初步应用点滴.2)房产地图google map的初步应用点滴.3) 房产地图google map的初步应用点滴.4) 以前 ...
谷歌地图实现车辆轨迹移动播放(google map api)
开发技术:jquery,js baidu map api,json,ajax QQ1310651206 谷歌地图(google map api)实现车辆轨迹移动播放(google map api)
Android Google Map API使用的八个步骤
本系列教程将分为两部分,第一部分是指导用户使用Mapview控件进行编程,其中包括了如何获得Google Map API,如何使用该API进行简单的开发,如何获得用户当前所在的位置.第二部分则包括如何 ...
Android中Google地图路径导航，使用mapfragment地图上画出线路(google map api v2)详解
在这篇里我们只聊怎么在android中google map api v2地图上画出路径导航,用mapfragment而不是mapview,至于怎么去申请key,manifest.xml中加入的权限,系 ...
Google Map API v2 （三）----- 地图上添加标记（Marker），标记info窗口，即指定经纬度获取地址字符串
接上篇 http://www.cnblogs.com/inkheart0124/p/3536322.html 1,在地图上打个标记 private MarkerOptions mMarkOption; ...
Google Map API v2 步步为营（一） ----- 初见地图
官方文档:https://developers.google.com/maps/documentation/android/start?hl=zh-CN 先谷歌后百度.使用google的api基本上按 ...
arcgis api for silverlight使用google map等多个在线地图
原文 http://blog.csdn.net/leesmn/article/details/6820245 无可否认,google map实在是很漂亮.可惜对于使用arcgis api for si ...

随机推荐

google protocol buffer的原理和使用（二）
本文主要会介绍怎么使用Google Protocol的Lib来序列化我们的数据,方法非常多种,本文仅仅介绍当中的三种.其它的方法读者能够通过自行研究摸索.但总的来说,序列化数据总的来说分为下面俩步: ...
我所遭遇过的游戏中间件---nvDXTLib
我所遭遇过的游戏中间件---nvDXTLib nvDXTLib是Nvidia提供的一套用于DXT纹理压缩SDK.接口十分简洁,就是提供了几个纹理压缩的函数,其中我使用最多的函数是: DXTLIB_AP ...
HTTP请求方法 GET POST【总结】
HTTP 8种请求方法概述 HTTP/1.1协议中共定义了八种方法(有时也叫"动作"),分别为:get,post,put, options,head,delete,trace,co ...
齐次坐标(Homogeneous Coordinates)
原文:http://blog.163.com/m_note/blog/static/208197045201272341230195/ 齐次坐标(Homogeneous Coordinates) 问题 ...
【Nodejs】“快算24”扑克牌游戏算法
算24是一款扑克牌游戏,它的游戏方式是把四张牌的牌面数值通过四则运算得到结果24,四张牌必须仅用一次.这是一种挺好的锻炼孩子算数能力的扑克牌游戏. 各地玩法还有点差别,有的只算1-10,其它抽出来:有 ...
基于XMPP 协议的开发 android
设计过一款基于开源的XMPP即时通信协议的软件.採用C/S协议,通过GPRS无线网络用TCP协议到server.以架设开源的Openfire server作为即时通讯平台系统主要由下面部分组成:一是 ...
Jquery attr("checked") 返回checked或undefined 获取选中失效
$('#cb').attr('checked'); 返回的是checked或者是undefined,不是原来的true和false了,有关此问题的解决方法如下: <input type='che ...
Office WORD如何关闭自动检查语法
只要把打钩的地方全部去掉即可.
如何使用Replace Pioneer批量查找和替换并提取指定字符串
1 我们查看源代码之后获得的网页文件如下图所示,一般都是href="/p-286018571.html"我们只要能提取到所有的"/p-XXXXXXXX.html" ...
【java读书笔记】JSTL，高速精通
JSTL并非什么新颖的技术并且非常easy,甚至有人觉得JSTL已经过时了.可是我觉得它既然存在,就有存在的道理.作为技术人员就应该知道它们是什么,怎么使用,有什么长处. JSTL包括两部分:标签库和 ...

房产地图google map的初步应用点滴.3)(转)

房产地图google map的初步应用点滴.3)(转)的更多相关文章

随机推荐

热门专题