房产地图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 ...
随机推荐
- Windows 7目录
1. 用wubi安装的Ubuntu在重装Windows 7系统后,如何恢复(转) 2. Windows 7系统垃圾清理自写程序
- OpenCV学习(24) 直方图(1)
直方图是对数据的统计,并将统计结果分布于一系列预定义的槽中.这里的数据不仅仅指的是灰度值,它可以是任何能有效描述图像特征的数据,比如图像梯度等等. 假设有一个矩阵包含一张图像的信息 (灰度值 0-25 ...
- 第二章 eclipse中m2e插件问题
1.当引入一个maven项目到eclipse中时,这时候可能会出现找不到一个插件的问题,例如: <plugin> <groupId>org.apache.maven.plugi ...
- Vue路由scrollBehavior滚动行为控制锚点
使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样. vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动. 注意: 这个功能只 ...
- POJ 2763 Housewife Wind LCA转RMQ+时间戳+线段树成段更新
题目来源:POJ 2763 Housewife Wind 题意:给你一棵树 2种操作0 x 求当前点到x的最短路 然后当前的位置为x; 1 i x 将第i条边的权值置为x 思路:树上两点u, v距离为 ...
- 编写批处理文件编译.Net工程
使用随Visual Studio一块安装的devenv.com,再加上参数可以对.Net进行编译,如下 "D:\Program Files\Microsoft Visual Studio 8 ...
- Python批量处理CSV文件
#encoding: utf-8 __author__ = 'DELL' import csv import glob import datetime import sys import os rel ...
- windows、linux mysql部署
阅读目录: 1.Windows下安装MySQL 2.Linux下安装MySQL 序章: MySQL是个小型的数据库,用来自己做小项目,做学习练习什么的再适合不过了,不过新手总会被一些莫名奇妙的问题难住 ...
- ZH奶酪：Windows7+VirtualBox安装Ubuntu虚拟机问题总结
1.下载VirtualBox(我的是4.3.26版本) https://www.virtualbox.org/ 2.下载Ubuntu ISO文件(我的是ubuntu-14.04-desktop-amd ...
- php之快速入门学习-7(运算符)
PHP 运算符 本章节我们将讨论 PHP 中不同运算符的应用. 在 PHP 中,赋值运算符 = 用于给变量赋值. 在 PHP 中,算术运算符 + 用于把值加在一起. PHP 算术运算符 运算符 名称 ...