Google Map API V3 (三) 反向解析物理地址对应的坐标

这里主要的一个重点是使用了google的地理解析包google.maps.Geocoder 
当传入值为address信息的时候,即告知google要查找的信息为地理坐标,通常情况下一个正确的地理位置会获得多个返回结果,即使搜索北京也会得到多个点(美国有个地方也叫北京) 
通过回调函数的方法function(results, status)可以得到的就是点集合、还有查询状态信息,和HTTP类似同样会有网络连接正常,错误,或者请求太过频繁被屏蔽(测试中连续点击大约20次左右,发现google拒绝再次返回地理信息),必要的用户信息提示还是必须的,不过用户一般不会太在意错误原因,告诉他再次刷新页面就好,或者是查询地理信息不存在没有结果等等 
Javascript代码   收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html>  
  3. <head>  
  4. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
  5. <meta http-equiv="Content-Type" content="text/html;charset=GBK" />  
  6. <title>反向解析地址</title>     
  7. <style>  
  8. html,body{height:100%;margin:0;padding:0;}  
  9. #map_canvas{height:87%;}  
  10. @media print{  
  11.     html,body{height:auto;}  
  12.     #map_canvas{height:100%;}  
  13. }  
  14. </style>  
  15. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=zh-CN"></script>  
  16. <script type="text/javascript">  
  17. // map.js  start  
  18. var $G,$O,$M,$L,$I;  
  19. (function(undefined){  
  20. O = function (id) {  
  21.     return "string" == typeof id ? document.getElementById(id):id;  
  22. };  
  23. MP = {  
  24.     y:39.9,  
  25.     x:116.4,  
  26.     point:function(y,x){  
  27.         return new google.maps.LatLng(y,x);  
  28.     },  
  29.     getCanvas:function(id){  
  30.         var mapid = id?id:'map_canvas';  
  31.         return document.getElementById(mapid);  
  32.     },  
  33.     options:function(center,z){  
  34.         return {  
  35.             zoom: z?z:14,  
  36.             center: center?center:this.getCenter(),  
  37.             navigationControl: true,  
  38.             scaleControl: true,  
  39.             streetViewControl: true,  
  40.             mapTypeId: google.maps.MapTypeId.ROADMAP  
  41.         }  
  42.     },  
  43. }  
  44.   
  45. M = {  
  46.     mark:function(map,latLng,title){  
  47.         if(title)  
  48.         return new google.maps.Marker({  
  49.             icon: this.icon,  
  50.             position: latLng,  
  51.             map: map,  
  52.             title:title  
  53.         });  
  54.         else   
  55.         return new google.maps.Marker({  
  56.             //icon: this.icon,  
  57.             position: latLng,  
  58.             map: map  
  59.         });  
  60.     }  
  61. }  
  62.   
  63. I = {  
  64.     infos:[],  
  65.     add:function(info,latLng,w,h){  
  66.         if(w&&h)  
  67.         return new google.maps.InfoWindow({  
  68.             content: info,  
  69.             size: new google.maps.Size(w,h),  
  70.             position: latLng  
  71.         });  
  72.         else if(latLng)  
  73.         return new google.maps.InfoWindow({  
  74.             content: info,  
  75.             position: latLng  
  76.         });  
  77.         else  
  78.         return new google.maps.InfoWindow({  
  79.             content: info  
  80.         });  
  81.     }  
  82. }  
  83.   
  84. //event 事件  
  85. L = {  
  86.     listen:null,  
  87.     add:function(dom,event,fn){  
  88.         return google.maps.event.addDomListener(dom, event, fn);  
  89.     },  
  90.     addOnce:function(dom, event, fn){  
  91.         return google.maps.event.addListenerOnce(dom, event, fn)  
  92.     }  
  93. }  
  94.   
  95. $G = MP;  
  96. $O = O;  
  97. $M = M;  
  98. $L = L;  
  99. $I = I;  
  100. })();  
  101. // map.js  end  
  102.   
  103. </script>  
  104. <script type="text/javascript">  
  105. var map;  
  106. var geocoder = new google.maps.Geocoder(); //申明地址解析对象  
  107. var z = 8;  
  108. function initialize(){  
  109.     var point = $G.point($G.y,$G.x);                            //初始中心点  
  110.     map = new google.maps.Map($G.getCanvas("map_canvas"), $G.options(point,z));     //初始化地图  
  111. }  
  112.   
  113. function searchaddress(){  
  114.     var address = $O("address").value;  
  115.     if (geocoder) {  
  116.         geocoder.geocode( { 'address': address,"language":"zh_cn"}, function(results, status) {  
  117.             if (status == google.maps.GeocoderStatus.OK) {  
  118.                 if(results[0]){  
  119.                     var point = results[0].geometry.location;  
  120.                     map.setCenter(point);  
  121.                     var marker = $M.mark(map,point);  
  122.                     $L.add(marker,"click",function(){  
  123.                         $I.add("我在这里").open(map,marker);  
  124.                     })  
  125.                 }  
  126.             } else {  
  127.                 alert("Geocode was not successful for the following reason: " + status);  
  128.             }  
  129.         });  
  130.     }  
  131. }  
  132. </script>  
  133. </head>  
  134. <body οnlοad="initialize()">  
  135.     <form id="form1" runat="server" action="#">  
  136.     <div>  
  137.         <input id="address" type="textbox" value="天津">  
  138.         <input type="button" value="反向地址解析" οnclick="searchaddress()">  
  139.     </div>  
  140.     </form>  
  141.     <div id="map_canvas"></div>  
  142. </body>  
  143. </html>  


 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值