google map api 与jquery结合使用(1)--控件,监听器[转帖]

google map api 与jquery结合使用1-3

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"
google map api 与jquery结合使用(1)--控件,监听器[转帖]

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
google map api 与jquery结合使用(1)--控件,监听器[转帖]

<html xmlns="http://www.w3.org/1999/xhtml">
google map api 与jquery结合使用(1)--控件,监听器[转帖]

<head>

<title>Google Maps 与 JQuery结合使用</title>
google map api 与jquery结合使用(1)--控件,监听器[转帖]

</head>

<body>

<div id="map" style="top:100px;left:300px;width: 600px; height: 400px"></div>
google map api 与jquery结合使用(1)--控件,监听器[转帖]

<div id="message"></div>
google map api 与jquery结合使用(1)--控件,监听器[转帖]

</body>

</html>

(2)在js文件中编写js代码
map.js

$(document).ready(function()
);

(3)在地址栏输入页面对应的地址(确定key是和你输入地址或域名匹配的),查看效果图，可以看到中国位于地图的中央。

HolloChina的效果图

地图的移动和变换

（1）修改javascript代码如下：
map.js

$(document).ready(function()
);

（2）输入对应的地址查看，等上4秒钟，就可以看到地图的中心移动到中国的西部(大概的位置)：

地图中心移动到中国的西部

添加控件并修改地图类型

修改javascript代码如下：
map.js

$(document).ready(function()
);

刷新页面，看到的效果是卫星地图的左上角有一个小的伸缩控件，右上角是地图选择的控件

加入控件后的效果图

添加事件监听器并开启滚轮伸缩效果

修改javascript代码：
map.js

$(document).ready(function()
);

此时的地图在滚动滚轮的时候会发生伸缩，而拖动完地图后，地图左侧的坐标信息会跟着变。