Google Map API V3 (三) 反向解析物理地址对应的坐标
这里主要的一个重点是使用了google的地理解析包google.maps.Geocoder
当传入值为address信息的时候，即告知google要查找的信息为地理坐标，通常情况下一个正确的地理位置会获得多个返回结果，即使搜索北京也会得到多个点（美国有个地方也叫北京）
通过回调函数的方法function(results, status)可以得到的就是点集合、还有查询状态信息，和HTTP类似同样会有网络连接正常，错误，或者请求太过频繁被屏蔽（测试中连续点击大约20次左右，发现google拒绝再次返回地理信息），必要的用户信息提示还是必须的，不过用户一般不会太在意错误原因，告诉他再次刷新页面就好，或者是查询地理信息不存在没有结果等等
当传入值为address信息的时候，即告知google要查找的信息为地理坐标，通常情况下一个正确的地理位置会获得多个返回结果，即使搜索北京也会得到多个点（美国有个地方也叫北京）
通过回调函数的方法function(results, status)可以得到的就是点集合、还有查询状态信息，和HTTP类似同样会有网络连接正常，错误，或者请求太过频繁被屏蔽（测试中连续点击大约20次左右，发现google拒绝再次返回地理信息），必要的用户信息提示还是必须的，不过用户一般不会太在意错误原因，告诉他再次刷新页面就好，或者是查询地理信息不存在没有结果等等
<!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 onload="initialize()">
<form id="form1" runat="server" action="#">
<div>
<input id="address" type="textbox" value="天津">
<input type="button" value="反向地址解析" onclick="searchaddress()">
</div>
</form>
<div id="map_canvas"></div>
</body>
</html>