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

happysoul

浏览: 404210 次
性别:
来自: 天津

最近访客更多访客>>

yuhua8688

gaopengv

huanchou

qq447373051

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

google map v3

google map v3 map 地图 javascript

这里主要的一个重点是使用了google的地理解析包google.maps.Geocoder
当传入值为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>