房产地图google map的初步应用点滴.3)
房产地图google map的初步应用点滴.1)
房产地图google map的初步应用点滴.2)
房产地图google map的初步应用点滴.3)
房产地图google map的初步应用点滴.4)
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() 配合使用。
简单来说，这个方法有三个参数，包括了一个监听时间的对象，一个等待监听的时间，一个在指定事件发生时调用的函数。
马上来看一个最最简单的例子，用户用鼠标在地图上点击，系统弹出用户点击地图位置的经纬度，够简单吧
<!
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) {
alert( " 你选择的经度是： " + event.latLng.lat() + " 纬度是： " + event.latLng.lat());
});
}
</ script >
</ head >
< body onload ="initialize()" >
< div id ="map-canvas" style ="width: 600px; height: 500px" ></ div >
</ body >
</ html >
< 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对象直接显示出来，再看看下面的例子，我们可以访问事件监听器的事件参数，也是一个非常简单的例子，当用户鼠标点击地图时，直接在点击的经纬度处实现一个小图标
<!
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 >
< 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 >
< 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 >
< 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 >
< 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的开发，欢迎赐教和讨论，建了个qq群：11029590