google Map APi学习与总结

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

google Map APi学习与总结

      首先介绍下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

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


  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官网的地图,有放的缩小,还有双击之类的调整的,于是,继续学习,去查看这些修饰的方法语句,经过一番努力,终于实现了漂亮的地图:

 

  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如下:

 

  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.     

 

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

代码如下:

  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>  

 

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

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

  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天后的今天,才慢慢的找出解决方案:

  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

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

使用新浪微博登陆