房产地图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 ...

随机推荐

Open edX 学习、开发、运维相关链接整理
原文地址:http://edustack.org/ 所需知识: Linux Git Python (Django Mako coffeescript sass) (MongoDB Mysql) Ans ...
一行代码轻松实现拖动效果[JQuery]
写JS实现拖动需要一大堆不便维护的代码,实属麻烦,Google了大半天,发现了一个优秀的Jquery插件EasyDrag,只需要一行代码便可轻松在主流浏览器上实现拖动效果. $(document ...
activity 保存数据
activity 保存数据对android的商业项目十分的重要,譬如你在发微博的时候,突然来了一个电话,你洋洋洒洒写了100个字,你不能保存的话,你岂不要卖要骂娘. 那activity究竟是保存数据的 ...
[置顶] 利用Global.asax的Application_Error实现错误记录，错误日志
利用Global.asax的Application_Error实现错误记录错误日志 void Application_Error(object sender, EventArgs e) { // 在 ...
（转）Unity3d UnityEditor编辑器定制和开发插件
在阅读本教程之前,你需要对Unity的操作流程有一些基础的认识,并且最好了解内置的GUI系统如何使用. 如何让编辑器运行你的代码 Unity3D可以通过事件触发来执行你的编辑器代码,但是我们需要一些编 ...
历尽折腾，终于把Unity3D 的demo发布安卓啦（问题）
只要碰到两个比较蛋疼的问题: 1. Error generating final archive: Debug certificate expired on **** 从字面了解,是由于Debug证书 ...
jmeter-The JVM should have exitted but did not
修改 jmeterengine.force.system.exit＝true
开放Fedora10自带的MySQL5.0.67的对外数据库服务
MySQL5.0.67是Fedora10安装时的可选项目. 测试的笔记本IP为192.168.0.100,作为安装Fedora10和MySQL5.0.67的服务器BlackMachine的IP地址为1 ...
shell中使用if判断时用到的一些参数
shell 编程中使用到得if语句内判断参数 –b 当file存在并且是块文件时返回真 -c 当file存在并且是字符文件时返回真 -d 当pathname存在并且是一个目录时返回真 -e 当path ...
VS2010已停止工作，framework 4.0安装失败
好久没在台式机上写程序了,今天打开一个解决方案,报错: 从来没有遇到这种情况,重新关闭解决方案,在菜单栏中打开解决方案说没有framework 4.0,其实我安装的是4.5 ,也有4.0,于是全部卸载 ...

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

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

随机推荐

热门专题