如下图，我输入了“天河美好居”，就可以反向解析到我的具体位置）
下面就班门弄斧的讲述一下：
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>
- 1.
- 2.
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>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
- 104.
- 105.
- 106.
- 107.
- 108.
- 109.
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
3. HTML Code：
<input id="txt_address" class="input_css" type="text" value="Where Are You ?"/>
<div id="map_canvas">
- 1.
- 2.
这样就可以对地址进行反向解析了，这里只进行简单的讲述，对于Google API更多更详细的描述，可以到Google Javascript API V3的官方文档去了解。反向地址解析是很有用的，例如，公司数据库中有上百万的企业数据，地址不够完善，这时我们就可以利用它来帮助我们完善这些数据了。当然，Google Map严格限制了查询的次数，多次查询会有LIMIT_QUERY的异常，这时我们就得使用一些手段来反限制，例如，在随机的时间间隔后查询等等，这里不详述。对于企业应用，还是付费使用，这样更稳定。
原文链接：http://www.cnblogs.com/three-zone/archive/2012/08/12/GeoCoder.html
【编辑推荐】
