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

三里屯摇滚 发表于 2011-12-28 11:08

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.jsstart
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.jsend

</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){
               var point = results.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>

<!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.jsstart
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.jsend

</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){
var point = results.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>

小忻黑夜 发表于 2011-12-28 11:11

学习了谢谢

页: [1]

Chinaunix's Archiver

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