google map api 与jquery结合使用－－控件,监听器

核心提示： （2）输入对应的地址查看，等上4秒钟，google map api 与jquery结合使用－－控件,监听器(3)，就可以看到地图的中心移动到中国的西部(大概的位置)：地图中心移动到中国的西部添加控件并修改地图类型修改javascript代码如下：map.js$(document).read

（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!');　　
　　 }
　　});

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