IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
    • 登录 注册

    google Map APi学习与总结

    usity发表于 2015-07-16 00:35:41
    love 0

      链接： http://www.usity.org/1807.html 

    1

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

              由于工作需要用到地图，我们项目组不约而同的想到Google Maps API ，就是在于它的方便，强大，直接调用接口，可是，对于一个从来没接触过的人来说，是有点困但的，不过，困难归困难，任务还是要完成的，于是通过网上学习，通过百度找google资料，现在想想也比较有趣，在网上找到的一些资料，慢慢的去学习，首先，使用谷歌地图 API 的第一步就是要 注册一个 API 密钥 ，

    script src="http://ditu.google.com/maps?file=api&v=2&key= 你注册的 API 密钥 " type="text/javascript"></script> 

    我的API Key是：ABQIAAAAMWyR7XvYN8KE9N6m_jcU4BRlfWJrPzRGiYSzS4l55_z1ea3VShRolPwARGHvivnEFRLVGXyIlsrYpA

    查找文档，迅速写出第一个地图：


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


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

     

    [html] view plaincopyprint?
    1. <!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"   
    2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
    3. <html xmlns="http://www.w3.org/1999/xhtml">  
    4.   <head>  
    5.     <meta http-equiv="content-type" content="text/html; charset=utf-8"/>  
    6.     <title>Google Maps </title>  
    7.     <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAArOZgwowl24SQDUsdg_UiMxQVwmba-i56saYlzjiEvj048FCMexTXH9I26hjJnXbmlYgoknC4agGy3Q"  
    8.             type="text/javascript"></script>  
    9.             <script type="text/javascript">  
    10.     function initialize() {  
    11.         if (GBrowserIsCompatible()) {  
    12.             var map = new GMap2(document.getElementById("map_canvas"));  
    13.             map.setCenter(new GLatLng(31.295310623919682,120.5486770248566), 8); //设置地图的中心点  
    14.             map.addControl(new GLargeMapControl()); //添加地图组件　一个在Google Local之中使用的大的移动缩放控件，显示在地图的左上角  
    15.             map.addControl(new GMapTypeControl()); //添加地图组件　让用户切换地图类型的按钮控件(例如地图模式和卫星图模式)      
    16.             map.addControl(new GScaleControl());//添加地图组件　地图比例尺控件  
    17.             map.addControl(new GOverviewMapControl(new GSize(100, 100))); //添加地图组件　一个可折叠的鹰眼地图，在地图的角落  
    18.             GEvent.addListener(map, "moveend", function () {  
    19.                 　 //捕捉　当地图上发生改变的时候调用  
    20.                 var center = map.getCenter(); //获得中心经纬  
    21.             });  
    22.             map.setMapType(G_HYBRID_MAP); //设置地图的类型　现在用的混合视图　(G_NORMAL_MAP >简图,G_SATELLITE_MAP >卫星图,G_HYBRID_MAP >混合图)  
    23.             map.enableScrollWheelZoom(); //让地图启用鼠标滚轮  
    24.             map.enableDoubleClickZoom();//让地图启用鼠标双击  
    25.             map.enableContinuousZoom();//让地图启动滑动效果  
    26.         } else {  
    27.             alert("Your browser is not compatible with GoogleMap"); //您的浏览器不兼容  
    28.         }  
    29.     }  
    30.       
    31.     </script>  
    32.   </head>  
    33.   <body onload="initialize()" onunload="GUnload()">  
    34.     <div id="map_canvas" style="width: 100%; height: 600px"></div>  
    35.   </body>  
    36. </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如下：

     

    [html] view plaincopyprint?
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3.     <head>  
    4.      <meta http-equiv="content-type" content="text/html; charset=utf-8"/>  
    5.   
    6.         <title>我的api</title>  
    7.         <link rel="shortcut icon" href="http://www.tucoo.com/icon/xtrd_iconset1/s/XTRD-heart.png"/> <!-- 随便连了个图标 -->  
    8.         <style type="text/css">  
    9.                 body {  
    10.                     text-algin: center;  
    11.                     }  
    12.   
    13.                 v\: * {  
    14.                     behavior: url(#default#VML);  
    15.                 }  
    16.                 #content{  
    17.                     height: 100%;  
    18.                     width: 100%;      
    19.                 }  
    20.                 #map{  
    21.                     widows: 100%;   
    22.                     height: 600px;      
    23.                 }  
    24.                 #message{  
    25.                     text-align: center;      
    26.                 }  
    27.                 #dosomething{  
    28.                     text-align: center;      
    29.                 }  
    30.                 #dosomething .button{  
    31.                     text-align: right;      
    32.                 }  
    33.         </style>  
    34.         <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAArOZgwowl24SQDUsdg_UiMxQVwmba-i56saYlzjiEvj048FCMexTXH9I26hjJnXbmlYgoknC4agGy3Q"  
    35.             type="text/javascript"></script><!-- 声明google key 请到http://www.google.com/apis/maps/signup.html申请 -->  
    36.         <script type="text/javascript">  
    37.         var map; // 定义地图  
    38.         function load(){  
    39.             if (GBrowserIsCompatible())//辨别浏览器是否兼容  
    40.              {  
    41.             map = new GMap2(document.getElementById("map"));//调用google函数画一个初图  
    42.             map.addControl(new GLargeMapControl());//添加地图组件　一个在Google Local之中使用的大的移动缩放控件，显示在地图的左上角  
    43.             map.addControl(new GMapTypeControl());//添加地图组件　让用户切换地图类型的按钮控件(例如地图模式和卫星图模式)   
    44.             map.addControl(new GScaleControl());//添加地图组件　地图比例尺控件   
    45.             map.addControl(new GOverviewMapControl(new GSize(100, 100)));//添加地图组件　一个可折叠的鹰眼地图，在地图的角落   
    46.             GEvent.addListener(map, "moveend", function () {　//捕捉　当地图上发生改变的时候调用  
    47.                 var center = map.getCenter();  
    48.                 document.getElementById("message").innerHTML = "\u4e2d\u5fc3\u7ecf\u7eac" + center.toString();//转码：中心经纬  
    49.             });  
    50.             map.setCenter(new GLatLng(39.917, 116.397), 4);//设置地图的中心点  
    51.             map.setMapType(G_HYBRID_MAP);　//设置地图的类型　现在用的混合视图　(G_NORMAL_MAP >简图,G_SATELLITE_MAP >卫星图,G_HYBRID_MAP >混合图)  
    52.             map.enableScrollWheelZoom();　//让地图启用鼠标滚轮  
    53.             map.enableDoubleClickZoom();　//让地图启用鼠标双击  
    54.             map.enableContinuousZoom();　//让地图启动滑动效果  
    55.             }else {  
    56.                 alert("Your browser is not compatible with GoogleMap");//您的浏览器不兼容  
    57.             }  
    58.         }  
    59.         function showme(){  
    60.             var cityname = document.getElementById('remark').value;//获得　备注  
    61.             var citylat = document.getElementById('lat').value;　//获得　纬度  
    62.             var citylon = document.getElementById('lon').value;　//获得　经度  
    63.             var citysize = document.getElementById('citysize').value;　//获得　地图比例  
    64.             if(citylat == '')  
    65.             {  
    66.                 window.alert('没有纬度');  
    67.                 return;  
    68.             }else if(citylon == '')  
    69.             {  
    70.                 window.alert('没有经度');  
    71.                 return;  
    72.             }  
    73.             if(cityname == '')  
    74.             {  
    75.                 cityname='没有备注';  
    76.             }  
    77.             var point = new GLatLng(citylat,citylon);　//创建一个坐标  
    78.             var marker = new GMarker(point, {draggable:true});    //创建一个标注　并启动它的拖拽功能  
    79.             GEvent.addListener(marker, "dragstart", function () {//当标注开始拖拽时发生  
    80.                     map.closeInfoWindow();  
    81.             });  
    82.             GEvent.addListener(marker, "dragend", function () {//当标注完成拖拽时发生  
    83.                 document.getElementById('lat').value = marker.getPoint().lat();  
    84.                 document.getElementById('lon').value = marker.getPoint().lng();  
    85.                 marker.openInfoWindowHtml("\u786e\u5b9a\u597d\u81ea\u5df1\u7684\u4f4d\u7f6e\u54e6");  
    86.             });  
    87.             GEvent.addListener(marker, "mouseover", function () {//当鼠标经过标注时发生  
    88.                 marker.openInfoWindow("<span style='font-size:9pt;'>注释：</span><span style='color:green;'>"+cityname+"</span>");  
    89.             });  
    90.             GEvent.addListener(marker, "mouseout", function () {//当鼠标离开标注时发生  
    91.                 map.closeInfoWindow();  
    92.             });  
    93.             map.addOverlay(marker);//在地图上添加标注  
    94.             document.getElementById('lat').value = marker.getPoint().lat();//修改纬度显示  
    95.             document.getElementById('lon').value = marker.getPoint().lng();//修改经度显示  
    96.             map.setCenter(point, parseFloat(citysize));//设置地图的中心点  
    97.         }  
    98.         window.onload=load;　//页面读取时开始加载  
    99.         window.onunload=GUnload;　//一个内存销毁函数　防止内存泄露  
    100.         </script>  
    101.     </head>  
    102.   
    103.     <body>  
    104.         <div id="content" style="">  
    105.             <div id="map" style=""></div>  
    106.             <div id="message"></div>  
    107.             <div id="dosomething">  
    108.                 备注：<input type="text" id="remark" value="嘿嘿，好地方"/>  
    109.                       
    110.                 经度：<input type="text" id="lat" value="30.59273"/>  
    111.                       
    112.                 纬度：<input type="text" id="lon" value="114.30542"/>  
    113.                      
    114.                 大小：<select id="citysize" title="地图显示的比例" onchange="showme();">  
    115.                                 <option value="1">1</option>  
    116.                                 <option value="2">2</option>  
    117.                                 <option value="3">3</option>  
    118.                                 <option value="4" selected="selected">4</option>  
    119.                                 <option value="5">5</option>  
    120.                                 <option value="6">6</option>  
    121.                                 <option value="7">7</option>  
    122.                                 <option value="8">8</option>  
    123.                                 <option value="9">9</option>  
    124.                                 <option value="10">10</option>  
    125.                                 <option value="11">11</option>  
    126.                                 <option value="12">12</option>  
    127.                                 <option value="13">13</option>  
    128.                                 <option value="14">14</option>  
    129.                                 <option value="15">15</option>  
    130.                                 <option value="16">16</option>  
    131.                                 <option value="17">17</option>  
    132.                                 <option value="18">18</option>  
    133.                     </select>  
    134.                 <br />  
    135.                 <input type="button" value="显示位置" onclick="showme();""/>  
    136.             </div>  
    137.         </div>  
    138.     </body>  
    139. </html>  
    140.     

     

    这样基本的小查询就实现了，但是说实话，一般很少人去通过经纬度查地址，这个是困难的同时也是不可行了的，大家很快就会想到查国家，查城市呀，于是又重新的修改了

    代码如下：

    [html] view plaincopyprint?
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd ">  
    2. <html xmlns=" http://www.w3.org/1999/xhtml" xml:lang="en">  
    3. <head>  
    4.   
    5.     <script src=" http://maps.google.com/maps?file=api&v=2&key=ABQIAAAALcd_q6UiGxcHp3eooJ2W-RQRS5-lso5HIopdvnzabVM14up_SRS1IkL_D0yPIgc-xdkCgecfiLNdfw"  
    6.         type="text/javascript">  
    7. //My Google Maps Key  
    8.     </script>  
    9.   
    10.     <script type="text/javascript">  
    11.   
    12. function load() {  
    13.     if (GBrowserIsCompatible()) {  
    14.         var map = new GMap2(document.getElementById("map"));  
    15.         map.addControl(new GLargeMapControl());  
    16.         map.addControl(new GMapTypeControl());  
    17.         map.addControl(new GOverviewMapControl(new GSize(100, 100)));  
    18.         var center = new GLatLng(31.298886, 120.585316);  
    19.         map.setCenter(center, 14);  
    20.         map.setMapType(G_NORMAL_MAP);  
    21.         map.enableScrollWheelZoom(); //让地图启用鼠标滚轮  
    22.         map.enableDoubleClickZoom();//让地图启用鼠标双击  
    23.         map.enableContinuousZoom();//让地图启动滑动效果  
    24.         geocoder = new GClientGeocoder();         
    25.         var marker = new GMarker(center, {  
    26.                 draggable : true  
    27.             });  
    28.         map.addOverlay(marker);  
    29.         document.getElementById("lat").value = center.lat();  
    30.         document.getElementById("lng").value = center.lng();  
    31.           
    32.         geocoder = new GClientGeocoder();  
    33.           
    34.         GEvent.addListener(marker, "dragend", function () {  
    35.             var point = marker.getPoint();  
    36.             map.panTo(point);  
    37.             document.getElementById("lat").value = point.lat();  
    38.             document.getElementById("lng").value = point.lng();  
    39.         });  
    40.           
    41.         GEvent.addListener(map, "moveend", function () {  
    42.             map.clearOverlays();  
    43.             var center = map.getCenter();  
    44.             var marker = new GMarker(center, {  
    45.                     draggable : true  
    46.                 });  
    47.             map.addOverlay(marker);  
    48.             document.getElementById("lat").value = center.lat();  
    49.             document.getElementById("lng").value = center.lng();  
    50.               
    51.             GEvent.addListener(marker, "dragend", function () {  
    52.                 var point = marker.getPoint();  
    53.                 map.panTo(point);  
    54.                 document.getElementById("lat").value = point.lat();  
    55.                 document.getElementById("lng").value = point.lng();  
    56.             });  
    57.         });  
    58.     }  
    59. }  
    60.   
    61. function showAddress(address) {  
    62.     var map = new GMap2(document.getElementById("map"));  
    63.     map.addControl(new GLargeMapControl());  
    64.     map.addControl(new GMapTypeControl());  
    65.     map.enableScrollWheelZoom(); //让地图启用鼠标滚轮      
    66.     map.enableDoubleClickZoom();//让地图启用鼠标双击  
    67.     map.enableContinuousZoom();//让地图启动滑动效果  
    68.     if (geocoder) {  
    69.         geocoder.getLatLng(address,  
    70.             function (point) {  
    71.             if (!point) {  
    72.                 alert(address + " city not found !");  
    73.             } else {  
    74.                 document.getElementById("lat").value = point.lat();  
    75.                 document.getElementById("lng").value = point.lng();  
    76.                 map.clearOverlays()  
    77.                 map.setCenter(point, 6);  
    78.                 var marker = new GMarker(point, {  
    79.                         draggable : true  
    80.                     });  
    81.                 map.addOverlay(marker);  
    82.                   
    83.                 GEvent.addListener(marker, "dragend", function () {  
    84.                     var pt = marker.getPoint();  
    85.                     map.panTo(pt);  
    86.                     document.getElementById("lat").value = pt.lat();  
    87.                     document.getElementById("lng").value = pt.lng();  
    88.                 });  
    89.                   
    90.                 GEvent.addListener(map, "moveend", function () {  
    91.                     map.clearOverlays();  
    92.                     var center = map.getCenter();  
    93.                     var marker = new GMarker(center, {  
    94.                             draggable : true  
    95.                         });  
    96.                     map.addOverlay(marker);  
    97.                     document.getElementById("lat").value = center.lat();  
    98.                     document.getElementById("lng").value = center.lng();  
    99.                       
    100.                     GEvent.addListener(marker, "dragend", function () {  
    101.                         var pt = marker.getPoint();  
    102.                         map.panTo(pt);  
    103.                         document.getElementById("lat").value = pt.lat();  
    104.                         document.getElementById("lng").value = pt.lng();  
    105.                     });  
    106.                 });  
    107.             }  
    108.         });  
    109.     }  
    110. }  
    111. </script>  
    112.   
    113. </head>  
    114. <body onload="load()" onunload="GUnload()"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
    115. <html>  
    116. <head>  
    117.     <title>my google map</title>  
    118.     <script type="text/javascript">  
    119.         function get_imps() {  
    120.             var t = document.getElementsByTagName('html');  
    121.             var arr = t[0].innerHTML.match(/redvase\.bravenet\.com\/track\/impression\/[^"' ]+/g)  
    122.                 lastValue = '';  
    123.             result = new Array  
    124.                 for (var i = 0; i < arr.length; i++) {  
    125.                     var curValue = arr[i];  
    126.                     if (curValue != lastValue) {  
    127.                         result[result.length] = curValue;  
    128.                     }  
    129.                     lastValue = curValue;  
    130.                 }  
    131.                 return result.join(',').replace(/\//g, '%2F')  
    132.         }  
    133.         function get_abuse_link() {  
    134.             tag = '<a href="http://www.bravenet.com/global/adproblem.php?ads_seen=' + get_imps() + '" style="font: 11px tahoma, sans-serif; color: #004891;" target="_blank">Report Problem Ad</a>'  
    135.                 o = document.getElementById('abuse-link')  
    136.                 o.innerHTML = tag  
    137.         }  
    138.     </script>  
    139. </head>  
    140.   
    141. <body>  
    142.     <script language="JavaScript">  
    143. var message = "";  
    144. function clickIE() {  
    145.     if (document.all) {  
    146.         (message);  
    147.         return false;  
    148.     }  
    149. }  
    150. function clickNS(e) {  
    151.     if  
    152.     (document.layers || (document.getElementById && !document.all)) {  
    153.         if (e.which == 2 || e.which == 3) {  
    154.             (message);  
    155.             return false;  
    156.         }  
    157.     }  
    158. }  
    159. if (document.layers) {  
    160.     document.captureEvents(Event.MOUSEDOWN);  
    161.     document.onmousedown = clickNS;  
    162. } else {  
    163.     document.onmouseup = clickNS;  
    164.     document.oncontextmenu = clickIE;  
    165. }  
    166. document.oncontextmenu = new Function("return false")  
    167.     </script>  
    168.         <b>城市名称:</b>  
    169.         <form action="#" onsubmit="showAddress(this.address.value); return false">  
    170.             <input type="text" size="34" name="address" value="苏州" />  
    171.             <input type="submit" value="查询!" />  
    172.         </form>  
    173.        最近的坐标:   
    174.             <table bgcolor="#FFFFFF" width="300">  
    175.                 <tr>  
    176.                     <td width="70">  
    177.                         <b>纬度:</b></td>  
    178.                     <td>  
    179.                         <input  type="text" size="34" name="latitude" value="" id="lat" /></td>  
    180.                 </tr>  
    181.                 <tr>  
    182.                     <td width="70">  
    183.                         <b>经度:</b></td>  
    184.                     <td>  
    185.                         <input  type="text" size="34" name="longitude" value="" id="lng" /></td>  
    186.                 </tr>  
    187.             </table>  
    188.             <br>  
    189.             <div align="center" id="map" style="width: 100%; height: 600px">  
    190.             </div>  
    191. </body>  
    192. </html>  
    193. </body>  
    194. </html>  

     

    但是  这个查出来功能是实现了，能够查询国家，查询城市了，可是不是显示城市信息，感觉很苦恼，随后进行改编

    这样就不但可以查询城市，还可以查询街道名称哦，甚至还可以显示查询的地址信息和邮政编码
     

    [html] view plaincopyprint?
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3. <head id="Head1" runat="server">  
    4.     <title>google map</title>  
    5.     <style type="text/css">  
    6.         body  
    7.         {  
    8.             font-family: Verdana, Arial, sans serif;  
    9.             font-size: 11px;  
    10.             margin: 2px;  
    11.         }  
    12.         table.directions th  
    13.         {  
    14.             background-color: #EEEEEE;  
    15.         }  
    16.         img  
    17.         {  
    18.             color: #000000;  
    19.         }  
    20.     </style>  
    21.   
    22.     <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAJmM4oHHk-rqX9L9qiuc-JRRO_N-AwaXOHpj4q9noXJ7oi8JM0hTY3x2vIcYDXr6J1ZdK7Cfue1OK5Q&hl=zh-CN&sensor=false"  
    23.         type="text/javascript"></script>  
    24.     <!-- 此为Google Map API 的验证码，用到自己的网站要去 http://www.google.com/apis/maps/ 审请一个 -->  
    25.     <script type="text/javascript">  
    26.     var i=1;  
    27.     var map;  
    28.     var currentOverlay = null;  
    29.     var geocoder;  
    30.     var address;  
    31.     var gdir;  
    32.     var addressMarker;  
    33.     function load() {  
    34.  //GBroswerIsCompatible()确定Api能否兼容当前浏览器  
    35.         if (GBrowserIsCompatible()) {  
    36.             map = new GMap2(document.getElementById("map"));  
    37.             var point = new GLatLng(31.294035589372354,120.57870384694675);  
    38.             map.setCenter(point,14);  
    39.             //map.addControl(new GLargeMapControl());  
    40.         map.addControl(new GMapTypeControl());          
    41.          var customUI = map.getDefaultUI();  
    42.          //Remove MapType.G_HYBRID_MAP  
    43.         customUI.maptypes.hybrid = false;  
    44.         map.enableDoubleClickZoom();  
    45.         map.setUI(customUI);  
    46.         //////////////////////////////////////////////维基百科  
    47.         //var myLayer = new GLayer("org.wikipedia.zh");  
    48.         //map.addOverlay(myLayer);  
    49.         ///////////////////////////////////////////////////////  
    50.             var marker = new GMarker(point);  
    51.     //var catorMsg = '苏州虎丘长江路';  
    52.             //marker.openInfoWindowHtml(catorMsg);  
    53.    map.addOverlay(marker);  
    54.       geocoder = new GClientGeocoder();  
    55.    geocoder.getLocations("苏州虎丘", function (response) {  
    56.    place = response.Placemark[0];  
    57.    marker.openInfoWindowHtml(  
    58.    '<b>纬经度:</b>' + place.Point.coordinates[1] + "," + place.Point.coordinates[0] + '<br>' +  
    59.    '<b>地址:</b>' + place.address + '<br>' +  
    60.    '<b>精准度:</b>' + place.AddressDetails.Accuracy + '<br>' +  
    61.    '<b>缩放级别为:</b>' + map.getZoom()+'<br>'+     
    62.    '<b>国家代码:</b> ' + place.AddressDetails.Country.CountryNameCode);  
    63.    }  
    64.    )  
    65.             GEvent.addListener(map, 'click',getAddress);  
    66.         //////////////////////////////////////////内置搜索  
    67.         //map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20)));  
    68.   map.addControl(new GScaleControl());//添加地图组件　地图比例尺控件  
    69.      map.addControl(new GOverviewMapControl(new GSize(200, 200))); //添加地图组件　一个可折叠的鹰眼地图，在地图的角落  
    70.         }  
    71.     }  
    72.     function removeCurrentOverlay() {  
    73.         map.removeOverlay(currentOverlay);  
    74.     }  
    75.   
    76.   function getAddress(overlay, latlng) {  
    77.       if (latlng != null) {  
    78.         address = latlng;  
    79.         geocoder.getLocations(latlng, showAddress);  
    80.       }  
    81.     }  
    82.   
    83.     function showAddress(response) {  
    84.       map.clearOverlays();  
    85.       if (!response || response.Status.code != 200) {  
    86.         alert("HTTP状态代码:" + response.Status.code);  
    87.       } else {  
    88.         place = response.Placemark[0];  
    89.         point = new GLatLng(place.Point.coordinates[1],  
    90.                             place.Point.coordinates[0]);  
    91.         marker = new GMarker(point);  
    92.     
    93.         map.addOverlay(marker);  
    94.         marker.openInfoWindowHtml(  
    95.         '<b>纬经度:</b>' + place.Point.coordinates[1] + "," + place.Point.coordinates[0] + '<br>' +  
    96.         '<b>地址:</b>' + place.address + '<br>' +  
    97.         '<b>精准度:</b>' + place.AddressDetails.Accuracy + '<br>' +  
    98.         '<b>缩放级别为:</b>' + map.getZoom()+'<br>'+     
    99.         '<b>国家代码:</b> ' + place.AddressDetails.Country.CountryNameCode);  
    100.       }  
    101.     }  
    102.   
    103.        ///外置搜索，只能搜地址  
    104.        function showAddr(address) {  
    105.       if (geocoder) {  
    106.         geocoder.getLatLng(  
    107.           address,  
    108.           function(point) {  
    109.             if (!point) {  
    110.               alert("不能解析: " + address);  
    111.             } else {  
    112.               map.setCenter(point, 14);  
    113.             }  
    114.     geocoder.getLocations(address, showAddress);  
    115.           }  
    116.         );  
    117.       }  
    118.     }  
    119.     </script>  
    120.   
    121. </head>  
    122. <body onload="load()" onunload="GUnload()">  
    123.  <div style="height:20px"></div>  
    124.     <div style="float: left; text-align: center; height: 550;">  
    125.         <form action="#" onsubmit="showAddr(this.address.value); return false">  
    126.         地点名:<input type="text" name="address" value="苏州虎丘" style="width: 190px" />  
    127.         <input type="submit" value="查找" />  
    128.         </form>  
    129.     </div>  
    130.  <div style="height:50px"></div>  
    131.     <div id="map" style="width: 100%; height: 600px; border: solid 1px #999; float: left">  
    132.     </div>  
    133. </body>  
    134. </html>  

     

    貌似这个基本上可以说是完成了，可是地图嘛，不但能够知道地点在哪，也应该能够查询出两点之间的行驶路线啊，于是继续改编，这个我纠结了好久，一直没解决，直到2天后的今天，才慢慢的找出解决方案：

    [html] view plaincopyprint?
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3. <head id="Head1" runat="server">  
    4.     <title>google map</title>  
    5.     <style type="text/css">  
    6.         body  
    7.         {  
    8.             font-family: Verdana, Arial, sans serif;  
    9.             font-size: 11px;  
    10.             margin: 2px;  
    11.         }  
    12.         table.directions th  
    13.         {  
    14.             background-color: #EEEEEE;  
    15.         }  
    16.         img  
    17.         {  
    18.             color: #000000;  
    19.         }  
    20.     </style>  
    21.   
    22.     <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAJmM4oHHk-rqX9L9qiuc-JRRO_N-AwaXOHpj4q9noXJ7oi8JM0hTY3x2vIcYDXr6J1ZdK7Cfue1OK5Q&hl=zh-CN&sensor=false"  
    23.         type="text/javascript"></script>  
    24.     <script type="text/javascript">  
    25.     var i=1;  
    26.     var map;  
    27.     var currentOverlay = null;  
    28.     var geocoder;  
    29.     var address;  
    30.     var gdir;  
    31.     var addressMarker;  
    32.     function load() {  
    33.         if (GBrowserIsCompatible()) {  
    34.             map = new GMap2(document.getElementById("map"));  
    35.             var p = new GLatLng(31.295035589372354,120.54870384694675);  
    36.             map.setCenter(p,14);            //map.addControl(new GLargeMapControl());  
    37.         map.addControl(new GMapTypeControl());          
    38.          var customUI = map.getDefaultUI();  
    39.          //Remove MapType.G_HYBRID_MAP  
    40.         customUI.maptypes.hybrid = false;  
    41.         map.enableDoubleClickZoom();  
    42.         map.setUI(customUI);  
    43.    
    44.             var marker = new GMarker(p);  
    45.            map.addOverlay(marker);  
    46.             var catorMsg = '苏州虎丘长江路';  
    47.             marker.openInfoWindowHtml(catorMsg);  
    48.             GEvent.addListener(map, 'click',getAddress);  
    49.             geocoder = new GClientGeocoder();  
    50.                 /////行车路线  
    51.         gdir = new GDirections(map, document.getElementById("directions"));  
    52.         GEvent.addListener(gdir, "load", onGDirectionsLoad);  
    53.         GEvent.addListener(gdir, "error", handleErrors);  
    54.         //////////////////////////////////////////内置搜索  
    55.         //map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20)));  
    56.   map.addControl(new GScaleControl());//添加地图组件　地图比例尺控件  
    57.      map.addControl(new GOverviewMapControl(new GSize(200, 200))); //添加地图组件　一个可折叠的鹰眼地图，在地图的角落  
    58.         }  
    59.     }  
    60.   
    61.     function createMarker(point, number, html) {  
    62.         var marker = new GMarker(point);  
    63.         GEvent.addListener(marker, "click", function() {  
    64.             marker.openInfoWindowHtml('<div>' + html + '</div><div style="font-size:12px;color:#999;padding-top:20px;" align="right"><a href="javascript:removeCurrentOverlay()">删除该标记</a></div>');  
    65.             currentOverlay = marker;  
    66.         });  
    67.         return marker;  
    68.     }  
    69.   
    70.     function removeCurrentOverlay() {  
    71.         map.removeOverlay(currentOverlay);  
    72.     }  
    73.   
    74.   function getAddress(overlay, latlng) {  
    75.       if (latlng != null) {  
    76.         address = latlng;  
    77.         geocoder.getLocations(latlng, showAddress);  
    78.       }  
    79.     }  
    80.   
    81.     function showAddress(response) {  
    82.       map.clearOverlays();  
    83.       if (!response || response.Status.code != 200) {  
    84.         alert("状态代码:" + response.Status.code);  
    85.       } else {  
    86.         place = response.Placemark[0];  
    87.         point = new GLatLng(place.Point.coordinates[1],  
    88.                             place.Point.coordinates[0]);  
    89.         marker = new GMarker(point);  
    90.         map.addOverlay(marker);  
    91.         marker.openInfoWindowHtml(  
    92.         '<b>初始 纬经度:</b>' + response.name + '<br/>' +   
    93.         '<b>纬经度:</b>' + place.Point.coordinates[1] + "," + place.Point.coordinates[0] + '<br>' +  
    94.         '<b>状态代码:</b>' + response.Status.code + '<br>' +  
    95.         '<b>请求状态:</b>' + response.Status.request + '<br>' +  
    96.         '<b>地址:</b>' + place.address + '<br>' +  
    97.         '<b>精确度:</b>' + place.AddressDetails.Accuracy + '<br>' +  
    98.         '<b>缩放级别为:</b>' + map.getZoom()+'<br>'+     
    99.         '<b>国家代码:</b> ' + place.AddressDetails.Country.CountryNameCode);  
    100.       }  
    101.     }  
    102.   
    103. ////定制行车路线  
    104.   
    105.    function setDirections(fromAddress, toAddress, locale) {  
    106.    if(fromAddress==""){  
    107.    alert("请输入出发地");  
    108.    return false;  
    109.    }if(toAddress==""){  
    110.    alert("请输入到达地");  return false;  
    111.    }else{  
    112.       gdir.load("从: " + fromAddress + " 到: " + toAddress,  
    113.                 { "locale": locale });}  
    114.     }  
    115.   
    116.      function handleErrors(){  
    117.           if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)  
    118.             alert("没有相应的地理位置能够指示这个指定的地址。这可能是由于原因:地址是相对较新的,或它可能是不正确的.\nError code: " + gdir.getStatus().code);  
    119.           else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)  
    120.             alert("一个地理编码或指令无法成功地处理要求,但失败的确切原因尚不清楚.\n Error code: " + gdir.getStatus().code);  
    121.           else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)  
    122.             alert("HTTP参数丢失或没有价值。这意味着输入一个空的地址地理编码的要求。这意味着没有查询到符合要求的指定的输入方向.\n Error code: " + gdir.getStatus().code);   
    123.           else if (gdir.getStatus().code == G_GEO_BAD_KEY)  
    124.             alert("给定的关键域是无效或不匹配. \n Error code: " + gdir.getStatus().code);  
    125.           else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)  
    126.             alert("无法成功地解析方向.\n Error code: " + gdir.getStatus().code);  
    127.           else alert("发生一个未知的错误.");  
    128.        }  
    129.   
    130.        function onGDirectionsLoad(){   
    131.        }  
    132.        ///外置搜索，只能搜地址  
    133.        function showAddr(address) {  
    134.       if (geocoder) {  
    135.         geocoder.getLatLng(  
    136.           address,  
    137.           function(point) {  
    138.             if (!point) {  
    139.               alert("不能解析: " + address);  
    140.             } else {  
    141.               map.setCenter(point, 14);  
    142.               var marker = new GMarker(point);  
    143.               map.addOverlay(marker);  
    144.               marker.openInfoWindowHtml(address);  
    145.             }  
    146.           }  
    147.         );  
    148.       }  
    149.     }  
    150.  //GSearch.setOnLoadCallback(load);  
    151.     </script>  
    152.   
    153. </head>  
    154. <body onload="load()" onunload="GUnload()">  
    155.     <div style="float: left; text-align: left; height: 550;">  
    156.         <form action="#" onsubmit="showAddr(this.address.value); return false">  
    157.         地点名:<input type="text" name="address" value="苏州虎丘长江路" style="width: 190px" />  
    158.         <input type="submit" value="查找" />  
    159.         </form>  
    160.         <form action="#" <onsubmitonsubmit="setDirections(this.from.value, this.to.value, this.locale.value); return false">  
    161.         <table>  
    162.             <tr>  
    163.                 <th align="right" >  
    164.                     出发从:   
    165.                 </th>  
    166.                 <td>  
    167.                     <input type="text" size="25" id="fromAddress" name="from" value="" />  
    168.                 </td>  
    169.             </tr>  
    170.             <tr>  
    171.                 <th align="right" >  
    172.                     前往至:   
    173.                 </th>  
    174.                 <td>  
    175.                     <input type="text" size="25" id="toAddress" name="to" value="" />  
    176.                 </td>  
    177.             </tr>  
    178.             <tr>  
    179.                 <td align="right">  
    180.                     显示语言:   
    181.                 </th>  
    182.                 <td>  
    183.                     <select id="locale" name="locale" style="width: 183px">  
    184.                         <option value="zh-CN" selected="selected">简体中文</option>  
    185.                         <option value="zh-TW">繁体中文</option>  
    186.                         <option value="en">English</option>  
    187.                         <option value="fr">French</option>  
    188.                         <option value="de">German</option>  
    189.                         <option value="ja">Japanese</option>  
    190.                         <option value="es">Spanish</option>  
    191.                     </select>  
    192.                 </td>  
    193.             </tr>  
    194.             <tr>  
    195.                 <td colspan="2" align="center">  
    196.                     <input name="submit" type="submit" value="寻找路线" />  
    197.                 </td>  
    198.             </tr>  
    199.             <tr>  
    200.                 <td valign="top" colspan="2">  
    201.                     <div id="directions" style="width: 275px; height: 404px; overflow: auto; overflow-x: hidden">  
    202.                     </div>  
    203.                 </td>  
    204.             </tr>  
    205.         </table>  
    206.         </form>  
    207.     </div>  
    208.     <div id="map" style="width: 64%; height: 600px; border: solid 1px #999; float: left">  
    209.     </div>  
    210. </body>  
    211. </html>  


     到此，个人学习api就算是暂时到这了，当然，还是会继续学习的，上面的代码都是可以用的哦，本人共享，希望大家都能有个好的地址学习google map api.

    转载于：http://blog.csdn.net/bzbb321/article/details/7419492



沪ICP备19023445号-2号
友情链接