Google Map中Geocoder接口来反向地址解析

 如下图，我输入了“天河美好居”，就可以反向解析到我的具体位置）

下面就班门弄斧的讲述一下：

1. 引入所需的JS：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="JS/jquery-1.7.min.js"></script> 

2. Javascript代码：

<script language="javascript" type="text/javascript"> 
     var map, marker, 
     //实例化地址解析器 
     geoCoder = new google.maps.Geocoder(), 
     //初始化地图的配置 
     myOptions = { 
         zoom: 15, 
         center: new google.maps.LatLng(113.32152399999995, 23.134685), 
         mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     function GetGeoCoder() { 
         var searchAddress = $("#txt_address").val(); 
         geoCoder.geocode({ 
             'address': searchAddress 
         }, 
         function(results, state) { 
             if (state = google.maps.GeocoderStatus.OK) { 
                 if (results[0]) { 
                     var point = results[0].geometry.location; 
                     if (marker) { 
                         marker.setMap(null); 
                     } 
                     marker = new google.maps.Marker({ 
                         map: map, 
                         position: point 
                     }); 
                     var infowindow = new google.maps.InfoWindow({ 
                         content: '<h3>我在这里.</h3>' + results[0].formatted_address 
                     }); 
                     google.maps.event.addListener(marker, 'click', 
                     function() { 
                         infowindow.open(map, marker); 
                     }); 
                     map.setCenter(point); 
  
                 } 
             } 
         }) 
     } 
     //利用html5的geolocation来获取当前位置 
     function GetGeoLocation() { 
         if (navigator.geolocation) { 
             navigator.geolocation.getCurrentPosition(function(position) { 
                 var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
                 console.log(position); 
                 geoCoder.geocode({ 
                     'latLng': pos 
                 }, 
                 function(results, state) { 
                     if (state = google.maps.GeocoderStatus.OK) { 
                         if (results[0]) { 
                             var point = results[0].geometry.location; 
                             var myDirection = results[0].formatted_address; 
                             if (marker) { 
                                 marker.setMap(null); 
                             } 
                             marker = new google.maps.Marker({ 
                                 map: map, 
                                 position: point 
                             }); 
                             var infowindow = new google.maps.InfoWindow({ 
                                 content: '<h3>我在这里</h3>' + myDirection 
                             }); 
                             google.maps.event.addListener(marker, 'click', 
                             function() { 
                                 infowindow.open(map, marker); 
                             }); 
                             map.setCenter(point); 
                             $("#txt_address").val(myDirection.split(' ')[0]); 
  
                         } 
                     } 
                 }) 
             }, 
             function() { 
                 handleNoGeolocation(true); 
             }, 
             { 
                 'enableHighAccuracy': true, 
                 'timeout': 10000, 
                 'maximumAge': 0 
             }); 
         } else { 
             // 浏览器不支持Geolocation 
             handleNoGeolocation(false); 
         } 
     } 
  
     function handleNoGeolocation(errorFlag) { 
         if (errorFlag) { 
             var content = 'Error: The Geolocation service failed.'; 
         } else { 
             var content = 'Error: Your browser doesn\'t support geolocation.'; 
         } 
  
         var options = { 
             map: map, 
             position: new google.maps.LatLng(113.32152399999995, 23.134685), 
             content: content 
         }; 
  
         var infowindow = new google.maps.InfoWindow(options); 
         map.setCenter(options.position); 
     } 
     $(function() { 
         map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); 
         //页面加载时，利用html5获取当前位置 
         GetGeoLocation(); 
         $('#txt_address').bind('keyup', 
         function(event) { 
             if (event.keyCode == 13) { 
                 GetGeoCoder(); 
             } 
         }); 
     }); 
 </script> 

3. HTML Code：

<input id="txt_address" class="input_css" type="text" value="Where Are You ?"/> 
<div id="map_canvas"> 

这样就可以对地址进行反向解析了，这里只进行简单的讲述，对于Google API更多更详细的描述，可以到Google Javascript API V3的官方文档去了解。反向地址解析是很有用的，例如，公司数据库中有上百万的企业数据，地址不够完善，这时我们就可以利用它来帮助我们完善这些数据了。当然，Google Map严格限制了查询的次数，多次查询会有LIMIT_QUERY的异常，这时我们就得使用一些手段来反限制，例如，在随机的时间间隔后查询等等，这里不详述。对于企业应用，还是付费使用，这样更稳定。

原文链接：http://www.cnblogs.com/three-zone/archive/2012/08/12/GeoCoder.html

【编辑推荐】