Google 地图和MAPABC地图研究

比如你要查询杭州,现在浏览器里输入 http://ditu.google.com/maps?f=q&hl=zh_CN&q=%E6%9D%AD%E5%B7%9E&output=js 分析源码: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“><html xmlns=”http:// www.w3.org/1999/xhtml“><head><meta http-equiv=”content-type” content=”text/html; charset=UTF-8”/><title>杭州 - Google 地图</ title><script type=”text/javascript”>//<![CDATA[ function onLoad() {var w = window.parent;w = w.parent;w.loadVPage({title:”杭州 - Google 地图”,vartitle:”“,url:”/maps?f=q \u0026hl=zh_CN\u0026q=%E6%9D%AD%E5%B7%9E \u0026ie=UTF8”,urlViewport:false,ei:”CcCRRo2yF6eIjQPm-q3mDw”,form: {selected:”q”,q:{q:”杭州”},l:{q:”“,near:”杭州”},d:{saddr:”“,daddr:”杭 州”},geocode:”“},query:{type:”g”},stickyFlags:{hl:”zh_CN”},viewport: {center:{lat:0,lng:0},span:{lat:0,lng: 0},mapType:”“},resolvedPOIID:false,mabcCenter:{id:”BE0000057A”,title:”浙 江省杭州 市”,gridcode:”4520312322”,bottomleftid:”BF00000AF4”,toprightid:”BF00000AF5”,­zoom:”9”},modules: [“”],overlays:{sxcar:false,markers: [{id:”addr”,mapabc_poiid:”BE0000057A”,lat:0,lng:0,image:”http:// www.google.com/intl/zh-CN_cn/mapfiles/arrow.png“,adr:true,elms:[6],laddr:”浙江省杭州市”,svaddr:”浙江省杭州市”, *************这里略去若干内容,太长了************* \u003c/div\u003e\u003c/div\u003e\u003c/div \u003e”,panelStyle:”“,panelId:0,printheader:”\u003ctable class= "printsummary"\u003e\u003ctr\u003e\u003ctd class="name"\u003e地址 \u003c/td\u003e\u003ctd id="header_start" class="value"\u003e浙江省杭州市 \u003cbr/\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table \u003e”,signed_in:true}, “state”);}//]]></script></head><body onload=”onLoad()”><input id=”state” type=”text” value=”“/></body></ html> ========================== 在浏览器上写js实现的时候,你需要用一个隐藏的iframe来载入这个也页面 注意到代码里: 这个页面会调用loadVPage,因此你事先要实现一个函数 window[‘loadVPage’]=function(data,a,b,c){ //处理data  
}
继续分析上面的代码,要知道某个查询是否有坐标返回,可以检查: data.mabcCenter && data.overlays.markers[0].id == ‘addr’ 如果条件满足,那么我们可以得到zoomlevel ,这个是 ( 17-data.mabcCenter.zoom*1 ) ** 用17减一下是因为mapabc的zoom跟google maps的语义相反 ** 那么,还有lat,lng没有返回,代码里面全是0 ,怎么办? ** 在之前的版本里面,data.orverlays.markers里面就包含了 lat,lng的数值,不需要做进一步处理,看来近期ditu也 进行了不少内部升级。 仔细分析ditu的js代码,可以知道它是这么做的: 仍旧看上面返回的代码, data.overlays.markers返回一个数组,里面包含了mapabc_poiid:”BE0000057A” 估计就是mapabc的pointer id, 利用这个id我们可以查到经纬度 翻译ditu的js代码后,最后它是调用mapabc的一个接口页面得到的,本例中,调用的地址是 http://mapgoogle.mapabc.com/mapabcpoi?pco=a;BE0000057A&cburl=ditu.goo… 它会返回这样的数据: notpcoStrbase64 = MTIwLjE3Mjk3MywzMC4yNzM5NzU5OQ== <div id =”aContainer”></div> <script language=javascript> var pco= “MTIwLjE3Mjk3MywzMC4yNzM5NzU5OQ==”; pco=pco.replace(/#_base64code_#/ig,”\n”); var cburl=”http://ditu.google.com/mapfiles/ mapabc_poiid_callback.html#”+pco; var containerNode = document.getElementById(“aContainer”);  createIframe(cburl,containerNode); function createIframe(srcURL,containerNode){  var anIframe = document.createElement(“iframe”);     anIframe.width  = “400”;    anIframe.height =”300”;     anIframe.src = srcURL; containerNode.appendChild(anIframe);
}
</script> </body></html> ================================ OK了,是一个base64编码过的坐标,解码后得到的是 120.172973,30.27397599 (**注意前面是经度,后面是维度,跟 google maps的又是相反的-_- **) , 找个google earth验证一下好了,这个就是杭州的坐标。 省的大家再去啃扰码后的那堆js,我把怎样得到这个坐标查询地址讲一下: 1. http://mapgoogle.mapabc.com/mapabcpoi   ,这是接口地址 2. pco=a;BE0000057A  这是坐标查询参数,BE0000057A是前面得到的mapabc_poiid,如果要查多个坐标,可以 用;连接   这样 pco=a;BE0000057A;BE0000057B;BE0000057C   ** 我没有试过查多个时的返回结果,如有需要请自行分析** 3. 最后一个参数是cburl就是回调页面 callback url .这个地址在本例中是 ditu.google.com/mapfiles/mapabc_poiid_callback.html  ,事实上你可以搞一个自己的回调页面 (比如做一下base64的解码工作之类的,因为它会把base64编码过的坐标作为参数传给那个页面。),甚至不用cburl参数也是可以的

Comments