快捷導(dǎo)航

jquery與google map api結(jié)合使用控件,監(jiān)聽(tīng)器

更新時(shí)間：2010年03月04日 18:37:44 作者：

關(guān)于jquery的獲取不再此處累贅，網(wǎng)上有許多關(guān)于jquery的介紹。

Google Maps JavaScript. API可以讓您在自己的網(wǎng)頁(yè)上使用Google地圖.在使用API之前，您應(yīng)該先申請(qǐng)一
個(gè)API key,申請(qǐng)API key請(qǐng)到：http://code.google.com/apis/maps/signup.html。這里假設(shè)你獲取到的key是：ABQIAA。
關(guān)于jquery的獲取不再此處累贅，網(wǎng)上有許多關(guān)于jquery的介紹。
接著我們就使用JQuery和Google Maps JavaScript. API來(lái)結(jié)合表現(xiàn)一下google map的有趣的地圖效果，進(jìn)而達(dá)到熟悉Google Maps JavaScript. API的目標(biāo)。
先來(lái)個(gè)HelloChina:
(1)在html文件中編寫html代碼:
map.html

復(fù)制代碼代碼如下:

 
<!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=utf-8"/> 
<title>Google Maps 與 JQuery結(jié)合使用</title> 
<script. src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAA" type="text/javascript"></script> 
<script. type="text/javascript" src="jquery.js"></script> 
<script. type="text/javascript" src="map.js"></script> 
</head> 
<body> 
<div id="map" style="top:100px;left:300px;width: 600px; height: 400px"></div> 
<div id="message"></div> 
</body> 
</html> 

(2)在js文件中編寫js代碼
map.js

復(fù)制代碼代碼如下:

 
$(document).ready(function() 
{ 
//檢查瀏覽器兼容性 
if (GBrowserIsCompatible()) { 
var map = new GMap2(document.getElementById("map")); 
map.setCenter(new GLatLng(36.94, 106.08), 4);//中國(guó)的經(jīng)緯度以及地方放大倍數(shù) 
map.setMapType(G_SATELLITE_MAP); 
//document卸載時(shí)觸發(fā) 
$(window).unload(function (){ 
$('.').unbind(); 
GUnload(); 
}); 
}else 
{ 
alert('你使用的瀏覽器不支持 Google Map!'); 
} 
}); 

(3)在地址欄輸入頁(yè)面對(duì)應(yīng)的地址(確定key是和你輸入地址或域名匹配的),查看效果圖，可以看到中國(guó)位于地圖的中央。
HolloChina的效果圖
地圖的移動(dòng)和變換
（1）修改javascript代碼如下：
map.js

復(fù)制代碼代碼如下:

 
$(document).ready(function() 
{ 
if (GBrowserIsCompatible()) { 
var map = new GMap2(document.getElementById("map")); 
map.setCenter(new GLatLng(36.94, 106.08), 4); 
//4秒后移動(dòng) 
window.setTimeout(function() { 
map.panTo(new GLatLng(35.746512259918504,78.90625)); 
}, 4000); 
$(window).unload(function (){ 
$('.').unbind(); 
GUnload(); 
}); 
}else 
{ 
alert('你使用的瀏覽器不支持 Google Map!'); 
} 
}); 

（2）輸入對(duì)應(yīng)的地址查看，等上4秒鐘，就可以看到地圖的中心移動(dòng)到中國(guó)的西部(大概的位置)：
地圖中心移動(dòng)到中國(guó)的西部
添加控件并修改地圖類型
修改javascript代碼如下：
map.js

復(fù)制代碼代碼如下:

 
$(document).ready(function() 
{ 
if (GBrowserIsCompatible()) { 
var map = new GMap2(document.getElementById("map")); 
//小型伸縮控制器 
map.addControl(new GSmallMapControl()); 
//地圖類型控制器 
map.addControl(new GMapTypeControl()); 
map.setCenter(new GLatLng(36.94,106.08),4); 
//將地圖設(shè)置為衛(wèi)星地圖 
map.setMapType(G_SATELLITE_MAP);//修改地圖類型 
$(window).unload(function (){ 
$('.').unbind(); 
GUnload(); 
}); 
}else 
{ 
alert('你使用的瀏覽器不支持 Google Map!'); 
} 
}); 

刷新頁(yè)面，看到的效果是衛(wèi)星地圖的左上角有一個(gè)小的伸縮控件，右上角是地圖選擇的控件
加入控件后的效果圖
添加事件監(jiān)聽(tīng)器并開(kāi)啟滾輪伸縮效果
修改javascript代碼：
map.js

復(fù)制代碼代碼如下:

 
$(document).ready(function() 
{ 
if (GBrowserIsCompatible()) { 
var map = new GMap2(document.getElementById("map")); 
map.addControl(new GSmallMapControl()); 
map.addControl(new GMapTypeControl()); 
//開(kāi)啟滾輪伸縮效果－－鼠標(biāo)滾輪向前滾放大地圖，反之縮小 
map.enableScrollWheelZoom(); 
//添加moveend事件監(jiān)聽(tīng)器 
GEvent.addListener(map, "moveend", function() { 
var center = map.getCenter(); 
//在這個(gè)DIV中顯示地圖中心的經(jīng)緯度 
$('#message').text(center.toString()); 
}); 
map.setCenter(new GLatLng(36.94,106.08),4); 
$(window).unload(function (){ 
$('.').unbind(); 
GUnload(); 
}); 
}else 
{ 
alert('你使用的瀏覽器不支持 Google Map!'); 
} 
}); 