转自:
http://www.jb51.net/article/22344.htm
关于 jquery 的获取不再此处累赘,网上有许多关于 jquery 的介绍.
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()) {
var map = new GMap2(document.getElementById("map"));
//小型伸缩控制器
map.addControl(new GSmallMapControl());
//地图类型控制器
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(36.94, 106.08), 4);
//将地图设置为卫星地图
map.setMapType(G_SATELLITE_MAP); //修改地图类型
$(window).unload(function() {
$('.').unbind();
GUnload();
});
} else {
alert('你使用的浏览器不支持 Google Map!');
}
});
刷新页面,看到的效果是卫星地图的左上角有一个小的伸缩控件,右上角是地图选择的控件
加入控件后的效果图
添加事件监听器并开启滚轮伸缩效果
修改 javascript 代码:
map.js $(document).ready(function() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
//开启滚轮伸缩效果--鼠标滚轮向前滚放大地图,反之缩小
map.enableScrollWheelZoom();
//添加moveend事件监听器
GEvent.addListener(map, "moveend",
function() {
var center = map.getCenter();
//在这个DIV中显示地图中心的经纬度
$('#message').text(center.toString());
});
map.setCenter(new GLatLng(36.94, 106.08), 4);
$(window).unload(function() {
$('.').unbind();
GUnload();
});
} else {
alert('你使用的浏览器不支持 Google Map!');
}
});
此时的地图在滚动滚轮的时候会发生伸缩,而拖动完地图后,地图左侧的坐标信息会跟着变.
来源: http://lib.csdn.net/article/jquery/36480