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

随机推荐

golang包管理工具及环境管理工具;如何下载外网的依赖包
简介: golang的包管理工具类似于java的maven.python的pip.js的npm,可以实现依赖包的统一管理:有很多:govendor.godep.glide,挑一个自己喜欢的用吧.mac ...
RuntimeError: Working outside of application context.
flask执行错误: 问题:RuntimeError: Working outside of application context. 方法: from flask import Flask, cur ...
Cocos2d-x3.3RC0通过JNI调用Android的Java层URI代码发送短信
1.Jni不在赘述.翻看前面博客 2.直接上代码 1)Java层,直接加在AppActivity.java中 public class AppActivity extends Cocos2dxActi ...
ASP.NET—015：ASP.NET中无刷新页面实现
原文作者:杨友山原文地址:http://blog.csdn.net/yysyangyangyangshan/article/details/39679823 前面也说过在asp.net中前后前交互的 ...
我所遭遇过的游戏中间件--Apex
我所遭遇过的游戏中间件--Apex Apex是PhysX的扩展中间件,它是在PhysX的基础上封装了一层.用于实现布料,粒子,破碎这三种物理效果.我只研究其布料处理.使用Apex做物理最大的好处是:它 ...
MySQL语法大全
select * from emp; #注释 #--------------------------- #----命令行连接MySql--------- #启动mysql服务器 net start m ...
JAVASCRIPT校验大全[转]
var IsFireFox = document.getElementById &&! document.all;//判断是否为FireFox //页面里回车到下一控件的焦点 func ...
Java中正则匹配性能测试
工作中经常会用到在文本中每行检索某种pattern,刚才测试了三种方式,发现实际性能和预想的有区别方式1: 直接字符串的matches方法,[string.matches("\\d+&qu ...
[置顶] 自定义的解压进度条关于ProgressBar的使用
整体布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android ...
java 判断字符串是否相等 (转)
http://blog.csdn.net/chtnj/article/details/7909720 判断字符串相等我们经常习惯性的写上if(str1==str2),这种写法在java中可能会带来问题 ...

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

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

随机推荐

热门专题