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

最新推荐文章于 2016-04-15 11:35:00 发布

mengzhengjie

最新推荐文章于 2016-04-15 11:35:00 发布

阅读量1.1k

点赞数

分类专栏： map

map 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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

这里主要的一个重点是使用了google的地理解析包google.maps.Geocoder
当传入值为address信息的时候，即告知google要查找的信息为地理坐标，通常情况下一个正确的地理位置会获得多个返回结果，即使搜索北京也会得到多个点（美国有个地方也叫北京）
通过回调函数的方法function(results, status)可以得到的就是点集合、还有查询状态信息，和HTTP类似同样会有网络连接正常，错误，或者请求太过频繁被屏蔽（测试中连续点击大约20次左右，发现google拒绝再次返回地理信息），必要的用户信息提示还是必须的，不过用户一般不会太在意错误原因，告诉他再次刷新页面就好，或者是查询地理信息不存在没有结果等等

     Javascript代码   
     
   
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html>  
 <head>  
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
 <meta http-equiv="Content-Type" content="text/html;charset=GBK" />  
 <title>反向解析地址</title>     
 <style>  
 html,body{height:100%;margin:0;padding:0;}  
 #map_canvas{height:87%;}  
 @media print{  
     html,body{height:auto;}  
     #map_canvas{height:100%;}  
 }  
 </style>  
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=zh-CN"></script>  
 <script type="text/javascript">  
 // map.js  start  
 var $G,$O,$M,$L,$I;  
 (function(undefined){  
 O = function (id) {  
     return "string" == typeof id ? document.getElementById(id):id;  
 };  
 MP = {  
     y:39.9,  
     x:116.4,  
     point:function(y,x){  
         return new google.maps.LatLng(y,x);  
     },  
     getCanvas:function(id){  
         var mapid = id?id:'map_canvas';  
         return document.getElementById(mapid);  
     },  
     options:function(center,z){  
         return {  
             zoom: z?z:14,  
             center: center?center:this.getCenter(),  
             navigationControl: true,  
             scaleControl: true,  
             streetViewControl: true,  
             mapTypeId: google.maps.MapTypeId.ROADMAP  
         }  
     },  
 }  
   
 M = {  
     mark:function(map,latLng,title){  
         if(title)  
         return new google.maps.Marker({  
             icon: this.icon,  
             position: latLng,  
             map: map,  
             title:title  
         });  
         else   
         return new google.maps.Marker({  
             //icon: this.icon,  
             position: latLng,  
             map: map  
         });  
     }  
 }  
   
 I = {  
     infos:[],  
     add:function(info,latLng,w,h){  
         if(w&&h)  
         return new google.maps.InfoWindow({  
             content: info,  
             size: new google.maps.Size(w,h),  
             position: latLng  
         });  
         else if(latLng)  
         return new google.maps.InfoWindow({  
             content: info,  
             position: latLng  
         });  
         else  
         return new google.maps.InfoWindow({  
             content: info  
         });  
     }  
 }  
   
 //event 事件  
 L = {  
     listen:null,  
     add:function(dom,event,fn){  
         return google.maps.event.addDomListener(dom, event, fn);  
     },  
     addOnce:function(dom, event, fn){  
         return google.maps.event.addListenerOnce(dom, event, fn)  
     }  
 }  
   
 $G = MP;  
 $O = O;  
 $M = M;  
 $L = L;  
 $I = I;  
 })();  
 // map.js  end  
   
 </script>  
 <script type="text/javascript">  
 var map;  
 var geocoder = new google.maps.Geocoder(); //申明地址解析对象  
 var z = 8;  
 function initialize(){  
     var point = $G.point($G.y,$G.x);                            //初始中心点  
     map = new google.maps.Map($G.getCanvas("map_canvas"), $G.options(point,z));     //初始化地图  
 }  
   
 function searchaddress(){  
     var address = $O("address").value;  
     if (geocoder) {  
         geocoder.geocode( { 'address': address,"language":"zh_cn"}, function(results, status) {  
             if (status == google.maps.GeocoderStatus.OK) {  
                 if(results[0]){  
                     var point = results[0].geometry.location;  
                     map.setCenter(point);  
                     var marker = $M.mark(map,point);  
                     $L.add(marker,"click",function(){  
                         $I.add("我在这里").open(map,marker);  
                     })  
                 }  
             } else {  
                 alert("Geocode was not successful for the following reason: " + status);  
             }  
         });  
     }  
 }  
 </script>  
 </head>  
 <body οnlοad="initialize()">  
     <form id="form1" runat="server" action="#">  
     <div>  
         <input id="address" type="textbox" value="天津">  
         <input type="button" value="反向地址解析" οnclick="searchaddress()">  
     </div>  
     </form>  
     <div id="map_canvas"></div>  
 </body>  
 </html>  