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

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

        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&amp;v=2&amp;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!');    
     }
} );

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

添加事件监听器和滚轮伸缩的效果图

后两篇：
[javascript]google map api 与jquery结合使用(2) --标注,浮窗

[javascript]google map api 与jquery结合使用(3) --图标样式,使用xml和异步请求  

Let life be beautiful like summer flowers and death like autumn leaves.