WEB开发网
开发学院网页设计JavaScript google map api 与jquery结合使用--控件,监听器... 阅读

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

 2010-09-14 13:29:45 来源:WEB开发网   
核心提示: (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!');  
   }
  });

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

上一页  1 2 3 

Tags:google map api

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接