房产地图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() 配合使用。
简单来说,这个方法有三个参数,包括了一个监听时间的对象,一个等待监听的时间,一个在指定事件发生时调用的函数。
马上来看一个最最简单的例子,用户用鼠标在地图上点击,系统弹出用户点击地图位置的经纬度,够简单吧
<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对象直接显示出来,再看看下面的例子,我们可以访问事件监听器的事件参数,也是一个非常简单的例子,当用户鼠标点击地图时,直接在点击的经纬度处实现一个小图标
<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对象,并显示相关的信息,在事件监听中使用了闭包函数将信息分配给图标,但在信息中并未包含在图标自身内
<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 传回的指定侦听器。
<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下面的代码吧
<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 ...
随机推荐
- java web中servlet、jsp、html 互相访问的路径问题
java web中servlet.jsp.html 互相访问的路径问题 在java web种经常出现 404找不到网页的错误,究其原因,一般是访问的路径不对. java web中的路径使用按我的分法可 ...
- Informatica 常用组件Aggregator之三 使用排序输入
可以使用排序输入选项改善聚合转换性能.使用排序输入时,PowerCenter 会假定所有数据已按组排序.PowerCenter 读取某组的行时,它将执行聚合计算.需要时,它会将组信息存储在存储器中.要 ...
- Linux C Socket编程原理及简单实例
部分转自:http://goodcandle.cnblogs.com/archive/2005/12/10/294652.aspx 1. 什么是TCP/IP.UDP? 2. Socket在哪里 ...
- go语言基础之同级目录
1.同级目录 分文件编程(多个源文件),必须放在src目录 同一个目录,包名必须一样 设置GOPATH环境变量 go env 查看go相关环境路径 GO PATH: 在windows系统中,添加go环 ...
- 百度编辑器ueditor通过ajax方式提交,不需要事先转义字符的方法(异常:从客户端(xxx)中检测到有潜在危险的 Request.Form 值)
最近项目中使用百度编辑神器ueditor,确实是很好用的一款编辑器.官网教程提供的与后端数据交互都是跟表单方式有关的,项目中使用的是ajax方式提交,因此出现了不少问题,现在记录备忘下. 环境:.ne ...
- Android中XML解析-PULL解析
前面写了两篇XML解析的Dom和SAX方式,Dom比较符合思维方式,SAX事件驱动注重效率,除了这两种方式以外也可以使用Android内置的Pull解析器解析XML文件. Pull解析器的运行方式与 ...
- 编写和执行C#代码的插件:CS-Script for Notepad++
这个插件可以方便得让您在Notepad++编辑器中编辑和执行C#代码(脚本).它具备通用的C#智能感知和项目任务管理功能,方式非常类似于MS Visual Studio.除了这一点,它提供了通用的调试 ...
- Android -- PullToRefresh应用
PullToRefresh 支持ListView.ExpandableListView.GridView.WebView 下载地址:https://github.com/chrisbanes/Andr ...
- Inside GDALAllRegister之一: 五大部分
基本信息 在GDAL的Tutorial中开篇即提到GDALAllRegister函数,它会注册所有已知的驱动,包括动态库自动加载的驱动.最关键是这句话: If for some application ...
- 代码录播:jQueryMobile 实现一个简单的弹出框效果
今天给大家带来的是 jQueryMobile 实现一个简单的弹出框效果,有兴趣的童鞋可以试试哦~ ^_^ 阅读原文:www.gbtags.com