Google Map API V3 (三) 反向解析物理地址对应的坐标
这里主要的一个重点是使用了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.jsstartvar $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});elsereturn 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 > <form id="form1" runat="server" action="#"> <div> <input id="address" type="textbox" value="天津"> <input type="button" value="反向地址解析" > </div> </form> <div id="map_canvas"></div></body></html>
http://dl.iteye.com/upload/attachment/612728/3977fa5d-f594-39ce-bb67-e14bc45a9c58.png
页:
[1]