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
BR>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Google Maps 与 JQuery结合使用
(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!');
}
});
此时的地图在滚动滚轮的时候会发生伸缩，而拖动完地图后，地图左侧的坐标信息会跟着变。
Statement：The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
