快捷導(dǎo)航

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

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

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

Google Maps JavaScript. API可以讓您在自己的網(wǎng)頁上使用Google地圖.在使用API之前，您應(yīng)該先申請一
個API key,申請API key請到：http://code.google.com/apis/maps/signup.html。這里假設(shè)你獲取到的key是：ABQIAA。
關(guān)于jquery的獲取不再此處累贅，網(wǎng)上有許多關(guān)于jquery的介紹。
接著我們就使用JQuery和Google Maps JavaScript. API來結(jié)合表現(xiàn)一下google map的有趣的地圖效果，進而達到熟悉Google Maps JavaScript. API的目標。
先來個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);//中國的經(jīng)緯度以及地方放大倍數(shù) 
map.setMapType(G_SATELLITE_MAP); 
//document卸載時觸發(fā) 
$(window).unload(function (){ 
$('.').unbind(); 
GUnload(); 
}); 
}else 
{ 
alert('你使用的瀏覽器不支持 Google Map!'); 
} 
}); 

(3)在地址欄輸入頁面對應(yīng)的地址(確定key是和你輸入地址或域名匹配的),查看效果圖，可以看到中國位于地圖的中央。
HolloChina的效果圖
地圖的移動和變換
（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秒后移動 
window.setTimeout(function() { 
map.panTo(new GLatLng(35.746512259918504,78.90625)); 
}, 4000); 
$(window).unload(function (){ 
$('.').unbind(); 
GUnload(); 
}); 
}else 
{ 
alert('你使用的瀏覽器不支持 Google Map!'); 
} 
}); 

（2）輸入對應(yīng)的地址查看，等上4秒鐘，就可以看到地圖的中心移動到中國的西部(大概的位置)：
地圖中心移動到中國的西部
添加控件并修改地圖類型
修改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!'); 
} 
}); 

刷新頁面，看到的效果是衛(wèi)星地圖的左上角有一個小的伸縮控件，右上角是地圖選擇的控件
加入控件后的效果圖
添加事件監(jiān)聽器并開啟滾輪伸縮效果
修改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.enableScrollWheelZoom(); 
//添加moveend事件監(jiān)聽器 
GEvent.addListener(map, "moveend", function() { 
var center = map.getCenter(); 
//在這個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!'); 
} 
}); 