你现在的位置:首页 > PHP网站建设知识库 > google api > 正文

google Map APi学习小结

首先介绍下Google Maps API ,它是 Google 自己推出编程 API ,可以让全世界对 Google Maps 有兴趣的程序设计师自行开发基于 Google Maps 的服务,建立自己的地图网站。以下是我在 Google Maps API 开发过程中找到的一些 API 的编程资源,包括中文文档,中文说明,示例等等,希望对 Google Maps 编程感兴趣的程序员有所帮助。

首先,使用谷歌地图 API 的第一步就是要 注册一个 API 密钥 

查找文档,迅速写出第一个地图:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
      <head>  
         <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>  
         <title> 我的谷歌地图</title>  
         <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAArOZgwowl24SQDUsdg_UiMxQVwmba-i56saYlzjiEvj048FCMexTXH9I26hjJnXbmlYgoknC4agGy3Q"  
            type="text/javascript"></script>  
      </head>  
      <body onload="initialize()" onunload="GUnload()">  
        <div id="mapContainer" style="height:400px; width:400px;"></div>  
      </body>  
      <script type="text/javascript">  
        function initialize() {  
          if (GBrowserIsCompatible()) {  
            var map = new GMap2(document.getElementById("mapContainer"));  
            map.setCenter(new GLatLng(33.0, 106.0), 3);  
          }  
        }  
      </script>  
    </html>  

打开看的时候,感觉比较枯燥,十分的不美观,看看google官网的地图,有放的缩小,还有双击之类的调整的,于是,继续学习,去查看这些修饰的方法语句,经过一番努力,终于实现了漂亮的地图:

<!DOCTYPE html "-//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 </title>  
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAArOZgwowl24SQDUsdg_UiMxQVwmba-i56saYlzjiEvj048FCMexTXH9I26hjJnXbmlYgoknC4agGy3Q"  
            type="text/javascript"></script>  
            <script type="text/javascript">  
    function initialize() {  
        if (GBrowserIsCompatible()) {  
            var map = new GMap2(document.getElementById("map_canvas"));  
            map.setCenter(new GLatLng(31.295310623919682,120.5486770248566), 8); //设置地图的中心点  
            map.addControl(new GLargeMapControl()); //添加地图组件 一个在Google Local之中使用的大的移动缩放控件,显示在地图的左上角  
            map.addControl(new GMapTypeControl()); //添加地图组件 让用户切换地图类型的按钮控件(例如地图模式和卫星图模式)      
            map.addControl(new GScaleControl());//添加地图组件 地图比例尺控件  
            map.addControl(new GOverviewMapControl(new GSize(100, 100))); //添加地图组件 一个可折叠的鹰眼地图,在地图的角落  
            GEvent.addListener(map, "moveend", function () {  
                //捕捉 当地图上发生改变的时候调用  
                var center = map.getCenter(); //获得中心经纬  
            });  
            map.setMapType(G_HYBRID_MAP); //设置地图的类型 现在用的混合视图 (G_NORMAL_MAP >简图,G_SATELLITE_MAP >卫星图,G_HYBRID_MAP >混合图)  
            map.enableScrollWheelZoom(); //让地图启用鼠标滚轮  
            map.enableDoubleClickZoom();//让地图启用鼠标双击  
            map.enableContinuousZoom();//让地图启动滑动效果  
        } else {  
            alert("Your browser is not compatible with GoogleMap"); //您的浏览器不兼容  
        }  
    }  
      
    </script>  
  </head>  
  <body onload="initialize()" onunload="GUnload()">  
    <div id="map_canvas" style="width: 100%; height: 600px"></div>  
  </body>  
</html>  
 
看到上面那些注释没,这些就是一些地图的特效,使其更加的美观,但目前也只是看的过程,并没有实现功能,有点缺憾,不过得继续加代码,大家很容易想到查城市,于是就开始在网上去搜寻查找的接口 ,一般比较常用也是比较简单的就是通过经纬度查相应的位置
,这个要用到一个类
GClientGeocoder 类
GClientGeocoder.getLocations(address, callback)
给 Google 服务器发送请求,对指定的地址进行地址解析。包含状态代码的答复,如果答复成功,则向用户指定的回调函数传递一个或多个 Placemark 对象。与 GClientGeocoder.getLatLng 方法不同,回调函数可以通过检查 Status 字段的代码值确定失败原因。
通过使用 GStreetviewPanorama 对象可支持街道视图图像,该对象提供街道视图 Flash® 查看器的 API 接口。要将街道视图合并到地图 API 的应用程序中,您需要遵循以下较为简单的步骤:
1.创建一个容器(通常是 <div> 元素),用于存放街道视图 Flash® 查看器。
2.创建 GStreetviewPanorama 对象,并将其放置在容器内。
3.初始化 Street View 对象,以便引用特定的位置,并显示初始的“视点”(POV)。
4.通过检查 603 错误值来处理不支持的浏览器。
实现的demo如下:

<!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>我的api</title>  
        <link rel="shortcut icon" href="http://www.tucoo.com/icon/xtrd_iconset1/s/XTRD-heart.png"/> <!-- 随便连了个图标 -->  
        <style type="text/css">  
                body {  
                    text-algin: center;  
                    }  
  
                v\: * {  
                    behavior: url(#default#VML);  
                }  
                #content{  
                    height: 100%;  
                    width: 100%;      
                }  
                #map{  
                    widows: 100%;   
                    height: 600px;      
                }  
                #message{  
                    text-align: center;      
                }  
                #dosomething{  
                    text-align: center;      
                }  
                #dosomething .button{  
                    text-align: right;      
                }  
        </style>  
        <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAArOZgwowl24SQDUsdg_UiMxQVwmba-i56saYlzjiEvj048FCMexTXH9I26hjJnXbmlYgoknC4agGy3Q"  
            type="text/javascript"></script><!-- 声明google key 请到http://www.google.com/apis/maps/signup.html申请 -->  
        <script type="text/javascript">  
        var map; // 定义地图  
        function load(){  
            if (GBrowserIsCompatible())//辨别浏览器是否兼容  
             {  
            map = new GMap2(document.getElementById("map"));//调用google函数画一个初图  
            map.addControl(new GLargeMapControl());//添加地图组件 一个在Google Local之中使用的大的移动缩放控件,显示在地图的左上角  
            map.addControl(new GMapTypeControl());//添加地图组件 让用户切换地图类型的按钮控件(例如地图模式和卫星图模式)   
            map.addControl(new GScaleControl());//添加地图组件 地图比例尺控件   
            map.addControl(new GOverviewMapControl(new GSize(100, 100)));//添加地图组件 一个可折叠的鹰眼地图,在地图的角落   
            GEvent.addListener(map, "moveend", function () { //捕捉 当地图上发生改变的时候调用  
                var center = map.getCenter();  
                document.getElementById("message").innerHTML = "\u4e2d\u5fc3\u7ecf\u7eac" + center.toString();//转码:中心经纬  
            });  
            map.setCenter(new GLatLng(39.917, 116.397), 4);//设置地图的中心点  
            map.setMapType(G_HYBRID_MAP); //设置地图的类型 现在用的混合视图 (G_NORMAL_MAP >简图,G_SATELLITE_MAP >卫星图,G_HYBRID_MAP >混合图)  
            map.enableScrollWheelZoom(); //让地图启用鼠标滚轮  
            map.enableDoubleClickZoom(); //让地图启用鼠标双击  
            map.enableContinuousZoom(); //让地图启动滑动效果  
            }else {  
                alert("Your browser is not compatible with GoogleMap");//您的浏览器不兼容  
            }  
        }  
        function showme(){  
            var cityname = document.getElementById('remark').value;//获得 备注  
            var citylat = document.getElementById('lat').value; //获得 纬度  
            var citylon = document.getElementById('lon').value; //获得 经度  
            var citysize = document.getElementById('citysize').value; //获得 地图比例  
            if(citylat == '')  
            {  
                window.alert('没有纬度');  
                return;  
            }else if(citylon == '')  
            {  
                window.alert('没有经度');  
                return;  
            }  
            if(cityname == '')  
            {  
                cityname='没有备注';  
            }  
            var point = new GLatLng(citylat,citylon); //创建一个坐标  
            var marker = new GMarker(point, {draggable:true});    //创建一个标注 并启动它的拖拽功能  
            GEvent.addListener(marker, "dragstart", function () {//当标注开始拖拽时发生  
                    map.closeInfoWindow();  
            });  
            GEvent.addListener(marker, "dragend", function () {//当标注完成拖拽时发生  
                document.getElementById('lat').value = marker.getPoint().lat();  
                document.getElementById('lon').value = marker.getPoint().lng();  
                marker.openInfoWindowHtml("\u786e\u5b9a\u597d\u81ea\u5df1\u7684\u4f4d\u7f6e\u54e6");  
            });  
            GEvent.addListener(marker, "mouseover", function () {//当鼠标经过标注时发生  
                marker.openInfoWindow("<span style='font-size:9pt;'>注释:</span><span style='color:green;'>"+cityname+"</span>");  
            });  
            GEvent.addListener(marker, "mouseout", function () {//当鼠标离开标注时发生  
                map.closeInfoWindow();  
            });  
            map.addOverlay(marker);//在地图上添加标注  
            document.getElementById('lat').value = marker.getPoint().lat();//修改纬度显示  
            document.getElementById('lon').value = marker.getPoint().lng();//修改经度显示  
            map.setCenter(point, parseFloat(citysize));//设置地图的中心点  
        }  
        window.onload=load; //页面读取时开始加载  
        window.onunload=GUnload; //一个内存销毁函数 防止内存泄露  
        </script>  
    </head>  
  
    <body>  
        <div id="content" style="">  
            <div id="map" style=""></div>  
            <div id="message"></div>  
            <div id="dosomething">  
                备注:<input type="text" id="remark" value="嘿嘿,好地方"/>  
                      
                经度:<input type="text" id="lat" value="30.59273"/>  
                      
                纬度:<input type="text" id="lon" value="114.30542"/>  
                     
                大小:<select id="citysize" title="地图显示的比例" onchange="showme();">  
                                <option value="1">1</option>  
                                <option value="2">2</option>  
                                <option value="3">3</option>  
                                <option value="4" selected="selected">4</option>  
                                <option value="5">5</option>  
                                <option value="6">6</option>  
                                <option value="7">7</option>  
                                <option value="8">8</option>  
                                <option value="9">9</option>  
                                <option value="10">10</option>  
                                <option value="11">11</option>  
                                <option value="12">12</option>  
                                <option value="13">13</option>  
                                <option value="14">14</option>  
                                <option value="15">15</option>  
                                <option value="16">16</option>  
                                <option value="17">17</option>  
                                <option value="18">18</option>  
                    </select>  
                <br />  
                <input type="button" value="显示位置" onclick="showme();""/>  
            </div>  
        </div>  
    </body>  
</html>