jquery與google map api結合使用 控件,監聽器
2024-05-06 14:11:14
供稿：網友
Google Maps JavaScript. API可以讓您在自己的網頁上使用Google地圖.在使用API之前，您應該先申請一
個API key,申請API key請到：http://code.google.com/apis/maps/signup.html。這里假設你獲取到的key是：ABQIAA。
關于jquery的獲取不再此處累贅，網上有許多關于jquery的介紹。
接著我們就使用JQuery和Google Maps JavaScript. API來結合表現一下google map的有趣的地圖效果，進而達到熟悉Google Maps JavaScript. API的目標。
先來個HelloChina:
(1)在html文件中編寫html代碼:
map.html
代碼如下:
<!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結合使用</title>
<script. src="http://maps.google.com/maps?file=api&v=2&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
代碼如下:
$(document).ready(function()
{
//檢查瀏覽器兼容性
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(36.94, 106.08), 4);//中國的經緯度以及地方放大倍數
map.setMapType(G_SATELLITE_MAP);
//document卸載時觸發
$(window).unload(function (){
$('.').unbind();
GUnload();
});
}else
{
alert('你使用的瀏覽器不支持 Google Map!');
}
});
(3)在地址欄輸入頁面對應的地址(確定key是和你輸入地址或域名匹配的),查看效果圖，可以看到中國位于地圖的中央。
HolloChina的效果圖
地圖的移動和變換
（1）修改javascript代碼如下：
map.js
代碼如下:
$(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）輸入對應的地址查看，等上4秒鐘，就可以看到地圖的中心移動到中國的西部(大概的位置)：
地圖中心移動到中國的西部
添加控件并修改地圖類型
修改javascript代碼如下：
map.js
代碼如下:
$(document).ready(function()
{
if (GBrowserIsCompatible()) {
