首页 > 代码库 > 房产地图google map的初步应用点滴.3)(转)
房产地图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="http://www.mamicode.com/#this" onclick="stoplistener()">关闭监听</a> <a href="http://www.mamicode.com/#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"后的所有参数都以参数的形式传递到监听器中。