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

随机推荐

python异常信息获取
1.python调试的时候获取异常信息 import traceback print '######################################################## ...
vijos p1729 Knights
描述在一个N*N的正方形棋盘上,放置了一些骑士.我们将棋盘的行用1开始的N个自然数标记,将列用'A'开始的N个大写英文字母标记.举个例子来说,一个标准的8*8的国际象棋棋盘的行标记为1..8,列标记 ...
JavaBean示例
例1.通过非可视化的JavaBean,封装邮箱地址对象,通过JSP页面调用该对象来验证邮箱地址是否合法. (1)创建名称为Email的JavaBean对象,用于封装邮箱地址,关键代码如下: packa ...
DataTable怎么判断一列是否为主键?
在普通情况下,我们使用SqlDataAdapter来Fill填充DataTable,如果使用下列代码我们是不能拿到主键列的: dataadapter.Fill(Table); DataColumn[] ...
【右滑返回】滑动冲突 Scroller DecorView
基本思想我们的滑动逻辑主要是利用View的scrollBy() 方法, scrollTo()方法和Scroller类来实现的当手指拖动视图的时候,我们监听手指在屏幕上滑动的距离利用View的sc ...
EOSS V3.0 企业运营支撑系统(基于RBAC原理的权限管理)
一:EOSS 功能介绍其于用户,角色,权限,菜单的一套“简约实用”的权限管理系统,可在其基础之上,快速进行二次开发. 一个用户可以选择多个角色. 一个角色可以选择多个权限. 一个菜单可以有无限级子菜 ...
IT运维流程 — ITIL
导读在IT运维中,最有名也是最实用的流程就是ITIL.说到这里,我想大家都有过实施ITIL痛苦的经历,一定会有人说:我们没有办法实施ITIL. 问:ITIL是什么? 答:ITIL即IT基础架构库(I ...
Win10系统下面的TR1008解决方案
最近为了体验高大上的Win10系统,于是就把本本原来的Win7旗舰版升级到了Win10专业版.之后又在本本上部署了cognos,但是在打开Transform导入IQD数据源的时候就报错了,错误和之 ...
[Functional Programming] Fst & Snd, Code interview question
cons(a, b) constructs a pair, and car(pair) and cdr(pair) returns the first and last element of that ...
避免闪烁的方法（OnEraseBkgnd）
在图形图象处理编程过程中,双缓冲是一种主要的技术.我们知道,假设窗口在响应WM_PAINT消息的时候要进行复杂的图形处理,那么窗口在重绘时因为过频的刷新而引起闪烁现象. 解决这一问题的有效方法就是双缓 ...

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

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

随机推荐

热门专题