房產(chǎn)地圖google map的初步應(yīng)用點(diǎn)滴.1)
房產(chǎn)地圖google map的初步應(yīng)用點(diǎn)滴.2)
房產(chǎn)地圖google map的初步應(yīng)用點(diǎn)滴.3)
google Map的交互基本都是事件驅(qū)動(dòng)的，這表示js是通過生成時(shí)間來響應(yīng)交互的，并且處于監(jiān)聽我們設(shè)定的事件，每個(gè) Google Maps API 對象都可導(dǎo)出大量已命名的事件。如果程序想要實(shí)現(xiàn)某些事件，則會(huì)為這些事件注冊 Javascript 事件偵聽器，并會(huì)在通過在 google.maps.event 命名空間中注冊 addListener() 事件處理程序接收這些事件時(shí)執(zhí)行相應(yīng)的代碼。
初步的事件響應(yīng)
google map中的所有對象都可以對用戶事件監(jiān)聽并作出響應(yīng)，用戶的事件可以包括鼠標(biāo)或鍵盤，對象可以監(jiān)聽以下這幾種事件：
'click'，'dblclick'，'mouseup'，'mousedown'，'mouseover'，'mouseout'
這些事件看上去很像標(biāo)準(zhǔn)的DOM事件，但這些時(shí)間可以在不同的瀏覽器實(shí)現(xiàn)不同的DOM事件模型。
在實(shí)現(xiàn)例子之前看看最常用的addListener() 官方api文檔：
addListener(instance:Object, eventName:string, handler:Function)
將指定偵聽器函數(shù)添加到指定對象實(shí)例的指定事件名稱。傳回該偵聽器的標(biāo)識符，該標(biāo)識符能夠與 eventRemoveListener() 配合使用。
簡單來說，這個(gè)方法有三個(gè)參數(shù)，包括了一個(gè)監(jiān)聽時(shí)間的對象，一個(gè)等待監(jiān)聽的時(shí)間，一個(gè)在指定事件發(fā)生時(shí)調(diào)用的函數(shù)。
馬上來看一個(gè)最最簡單的例子，用戶用鼠標(biāo)在地圖上點(diǎn)擊，系統(tǒng)彈出用戶點(diǎn)擊地圖位置的經(jīng)緯度，夠簡單吧
<!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("你選擇的經(jīng)度是："+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，如果沒有刪掉的話
重點(diǎn)集中在
google.maps.event.addListener(map, 'click', function(event) {
alert("你選擇的經(jīng)度是："+event.latLng.lat()+" 緯度是："+event.latLng.lat());
});
我們選擇監(jiān)聽的對象是map，等待監(jiān)聽的事件是'click'，當(dāng)監(jiān)聽對象符合了監(jiān)聽事件后就觸發(fā)了function
將觸發(fā)事件獲取的參數(shù)作為傳遞的對象
在上面的例子上，我們通過事件的觸發(fā)獲取了event對象，并將event.latLng對象直接顯示出來，再看看下面的例子，我們可以訪問事件監(jiān)聽器的事件參數(shù)，也是一個(gè)非常簡單的例子，當(dāng)用戶鼠標(biāo)點(diǎn)擊地圖時(shí)，直接在點(diǎn)擊的經(jīng)緯度處實(shí)現(xiàn)一個(gè)小圖標(biāo)
<!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
閉包在事件監(jiān)聽中的使用
在執(zhí)行事件偵聽器時(shí)，通常可取的做法是將私有數(shù)據(jù)和持久性數(shù)據(jù)附加到對象中。JavaScript 不支持“私有”實(shí)例數(shù)據(jù)，但它支持允許內(nèi)部函數(shù)訪問外部變量的閉包。在事件偵聽器訪問通常不附加到發(fā)生事件的對象的變量時(shí)，閉包非常有用。
在延續(xù)上面的例子，點(diǎn)擊出現(xiàn)的圖標(biāo)，彈出一個(gè)InfoWindow對象，并顯示相關(guān)的信息，在事件監(jiān)聽中使用了閉包函數(shù)將信息分配給圖標(biāo)，但在信息中并未包含在圖標(biāo)自身內(nèi)
<!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: "網(wǎng)易房產(chǎn)地圖:你是第"+number+"個(gè)圖標(biāo)"});
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
關(guān)閉監(jiān)聽
關(guān)閉監(jiān)聽非常簡單，只需調(diào)用到一個(gè)函數(shù)，removeListener(listener:MapsEventListener) ，刪除應(yīng)由上述 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()">關(guān)閉監(jiān)聽</a> <a href="#this" onclick="startlistener()">重啟監(jiān)聽</a>
</body>
</html>
地址：http://216.24.193.245/eg_map/033005.html
應(yīng)用實(shí)例
下面來看一個(gè)有趣一點(diǎn)的實(shí)例，其中涉及到UI組件的構(gòu)建，可以參考
房產(chǎn)地圖google map的初步應(yīng)用點(diǎn)滴.2)，相比起上面得簡單無味的例子稍微多了一點(diǎn)點(diǎn)的復(fù)雜
先看看效果吧，點(diǎn)擊圖標(biāo)，出現(xiàn)一個(gè)bar，把鼠標(biāo)移動(dòng)到bar上，發(fā)現(xiàn)里面的信息出現(xiàn)了變化，再點(diǎn)擊bar，bar條進(jìn)行了隱藏
地址：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="網(wǎng)易房產(chǎn)地圖:1";
});
google.maps.event.addListener(customLabel, "mouseout", function(e) {
document.getElementById("hbprice").innerHTML="網(wǎng)易房產(chǎn)地圖: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=''>網(wǎng)易房產(chǎn)地圖</div><span class='rbg'></span></div></div>";
div = this.div_ = document.createElement('DIV');
div.style.position = "absolute";
div.innerHTML = content;
//這個(gè)div的對象需要Listener事件，必須先用trigger（me）先進(jìn)行偵聽
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);
}
//計(jì)算存放可拖動(dòng)地圖的 DOM 元素中指定地理位置的像素坐標(biāo)
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進(jìn)行click監(jiān)聽，當(dāng)觸發(fā)了監(jiān)聽，則構(gòu)建了一個(gè)customLabel = new CustomLabel(marker.getPosition())對象，在構(gòu)建的同時(shí)又對customLabel對象進(jìn)行了mouseover，mouseout，click監(jiān)聽，我們在這里構(gòu)建了2層的監(jiān)聽事件，所以在CustomLabel對象中trigger（me）的監(jiān)聽
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");
});
在監(jiān)聽到觸發(fā)指定事件，"mouseover"后的所有參數(shù)都以參數(shù)的形式傳遞到監(jiān)聽器中。
如果你也在進(jìn)行g(shù)oogle map的開發(fā)，歡迎賜教和討論，建了個(gè)qq群：11029590