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

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代码：

  1 <script language="javascript" type="text/javascript">
  2     var map, marker,
  3     //实例化地址解析器
  4     geoCoder = new google.maps.Geocoder(),
  5     //初始化地图的配置
  6     myOptions = {
  7         zoom: 15,
  8         center: new google.maps.LatLng(113.32152399999995, 23.134685),
  9         mapTypeId: google.maps.MapTypeId.ROADMAP
 10     };
 11     function GetGeoCoder() {
 12         var searchAddress = $("#txt_address").val();
 13         geoCoder.geocode({
 14             'address': searchAddress
 15         },
 16         function(results, state) {
 17             if (state = google.maps.GeocoderStatus.OK) {
 18                 if (results[0]) {
 19                     var point = results[0].geometry.location;
 20                     if (marker) {
 21                         marker.setMap(null);
 22                     }
 23                     marker = new google.maps.Marker({
 24                         map: map,
 25                         position: point
 26                     });
 27                     var infowindow = new google.maps.InfoWindow({
 28                         content: '<h3>我在这里.</h3>' + results[0].formatted_address
 29                     });
 30                     google.maps.event.addListener(marker, 'click',
 31                     function() {
 32                         infowindow.open(map, marker);
 33                     });
 34                     map.setCenter(point);
 35 
 36                 }
 37             }
 38         })
 39     }
 40     //利用html5的geolocation来获取当前位置
 41     function GetGeoLocation() {
 42         if (navigator.geolocation) {
 43             navigator.geolocation.getCurrentPosition(function(position) {
 44                 var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
 45                 console.log(position);
 46                 geoCoder.geocode({
 47                     'latLng': pos
 48                 },
 49                 function(results, state) {
 50                     if (state = google.maps.GeocoderStatus.OK) {
 51                         if (results[0]) {
 52                             var point = results[0].geometry.location;
 53                             var myDirection = results[0].formatted_address;
 54                             if (marker) {
 55                                 marker.setMap(null);
 56                             }
 57                             marker = new google.maps.Marker({
 58                                 map: map,
 59                                 position: point
 60                             });
 61                             var infowindow = new google.maps.InfoWindow({
 62                                 content: '<h3>我在这里</h3>' + myDirection
 63                             });
 64                             google.maps.event.addListener(marker, 'click',
 65                             function() {
 66                                 infowindow.open(map, marker);
 67                             });
 68                             map.setCenter(point);
 69                             $("#txt_address").val(myDirection.split(' ')[0]);
 70 
 71                         }
 72                     }
 73                 })
 74             },
 75             function() {
 76                 handleNoGeolocation(true);
 77             },
 78             {
 79                 'enableHighAccuracy': true,
 80                 'timeout': 10000,
 81                 'maximumAge': 0
 82             });
 83         } else {
 84             // 浏览器不支持Geolocation
 85             handleNoGeolocation(false);
 86         }
 87     }
 88 
 89     function handleNoGeolocation(errorFlag) {
 90         if (errorFlag) {
 91             var content = 'Error: The Geolocation service failed.';
 92         } else {
 93             var content = 'Error: Your browser doesn\'t support geolocation.';
 94         }
 95 
 96         var options = {
 97             map: map,
 98             position: new google.maps.LatLng(113.32152399999995, 23.134685),
 99             content: content
100         };
101 
102         var infowindow = new google.maps.InfoWindow(options);
103         map.setCenter(options.position);
104     }
105     $(function() {
106         map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
107         //页面加载时，利用html5获取当前位置
108         GetGeoLocation();
109         $('#txt_address').bind('keyup',
110         function(event) {
111             if (event.keyCode == 13) {
112                 GetGeoCoder();
113             }
114         });
115     });
116 </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的异常，这时我们就得使用一些手段来反限制，例如，在随机的时间间隔后查询等等，这里不详述。对于企业应用，还是付费使用，这样更稳定。（javascript菜鸟班门弄斧，希望各位大虾见谅）