Rover's Official Blog

Map/GPS/GIS/WebMap

  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
  128 随笔 :: 0 文章 :: 650 评论 :: 41 引用

怎么会去搞一个离线调试包呢,为什么不直接在线调试呢?其实,主要是因为我用了大半年的免费无线被加密了,从此我就开始了我的断网生活,但又想搞点Google Maps API玩玩,没有网络就不能使用Google Maps API开发了吗?就不能本地脱机离线调试吗?我不甘心。于是就产生了这个离线调试代码包,其实简单的来说,就是将Google Maps API封装的那些JS下载到本地,然后就可以在离线的状态下进行本地调试了。测试了几个晚上,也不能说我的代码包中的JS代码已经下载全,但是至少在本地调试一些marker和poly等还是OK的,代码包中附带了Google提供的三个例子,最后一个放大镜的例子是蛮没有意思的不建议看(主要是因为本地没有任何地图,全是抱歉找不到这个缩放区域,所以看不出任何的效果),但另外两个例子是在本地完全可以运行的,一个是地理知识考题,一个是标点画线得到距离。但是我在测试本地调用kml的时候没有成功,虽然我也已经加载了kmlapi的js文件,这一点可能需要继续研究一下。但是对于mark、poly、tip等等都是OK的,至少example里就能看出效果来。我还没有怎么用,也没有测试过太多的函数,如果后期发现问题那么以后再来修正吧。

下载地址:GoogleMapsAPI_OfflineDebugPack.rar

那么我们来说说如何得到这个离线调试包,授人以鱼不如授人以渔,当然这里也很简单算不上什么授渔。首先,当然是去Google获取域名的key了,这个简单的道理不用多说了。然后把该页面中说的简单调用代码完整的保存成html文件,打开这个文件我们就可以看到Google Map了,一个最简单的调用就完成了。一般要想得到别人的东西首先肯定是保存这个页面,没错,我也是这么做的,然后就得到了一个maps文件,其实也就是下载了Gmap的调用文件,地址:http://maps.google.com/maps?file=api&v=2&key=ABQIAAAALnobdtcQBfcYCnVSCwRHOxS79ylobW1eCJiHSW2SS5sQtpAV3RTgS5_aqQLZwCkEn_OAeso4797XXA,直接通过浏览器也是可以下载到这个文件的,这个是我127.0.0.1的域名所得到的key。将maps文件改名成maps_my.js文件,然后将script调用的上面带有key的地址换成maps_my.js,重新运行html,发现OK可以运行,并且没有任何问题,但是仅仅依靠这个maps_my.js文件肯定是不可行的,因为这个js文件又在内部调用了很多的js文件,而Google很厉害的就给你仅仅下载了这么一个js,其余的js都是通过maps_my.js文件中的js再去调用远程的js,但是你却看不到任何的js文件的明码地址,这其实是有点可恶的。如果仅仅通过maps_my.js文件离线调用,那么你的运行就仅仅是一个图片样子的内容,无法做任何的操作也看不懂是什么东西。那么我们接下来就是要分析maps_my.js了。

为了去掉烦人的网站验证,我们首先去开刀Gmap的key认证吧。找到那个alert,就在下面没几行的位置,并且中文提示那么的好找,而GValidateKey函数其实就是最后的验证,验证不通过就alert了,那么最简单的肯定是要验证通过,将GValidateKey函数前的表示不等的感叹号去掉,这样就不验证了,至少不会跳出烦人的key注册对话框了,因为我的域名错了反而是让他认证通过,而正确的域名反而不通过。此点在Google了一下以后有个台湾的网友对此做过一个简单的分析,也是讲如何去掉验证的,不过我想我的这个方法并不是什么正确的方法,因为仅仅将不等于改成等于来免除alert,而网站的访问是依旧的,就是说域名肯定会返回Google去验证key,只是错误的域名反而通过了验证。由此我在想,Google本身对网站有多少万的访问请求限制,那么通过这样的方法,是否可以免去这个限制呢,这样你的域名就可以超量访问Google的地图服务器了。虽然我想是如此,但感觉Google应该不会那么简单。对于此,如果有朋友不想验证域名key的,可以用此方法尝试看看。

继续分析maps_my.js文件,有两个非常显眼的main.js文件,分别位于http://maps.google.com/intl/zh-CN_ALL/mapfiles/140g/maps2/main.jshttp://maps.google.com/intl/zh-CN_ALL/mapfiles/140g/maps2.api/main.js,我想这两个应该是主要的对js再调用的文件,下载下来让他们到本地进行调试,发现竟然也能通过,看来这两个main.js调用了Google绝对路径的js文件,为了找到这些绝对路径的js文件,打开Firefox使用FireBug来查看(FireBug确实是非常优秀的查看HTML代码的工具,清晰明了)。首先看到的是这样的一个js文件:http://maps.google.com/intl/zh-CN_ALL/mapfiles/140g/maps2.api/mod_jslinker.js,下载OK。然后又有一个http://maps.google.com/cat_js/intl/zh-CN_ALL/mapfiles/140g/maps2.api/%7Bmod_drag,mod_controls%7D.js文件,竟然会取名为{mod_drag,mod_controls}.js这样的文件名,够怪,但结果也是能够下载的,够晕吧。但当我回到家离线调用的时候,发现不是这个{}.js文件了,是mod_drag.js和mod_controls.js,看来Google搞鬼。另外一个厉害的地方是,Google在js中首先会去判断所要调用的png或者gif文件是否存在,如果不存在那么全部使用transparent.png文件将界面变灰,你什么都看不到,包括GLargeMapControl的图片你都无法看到,郁闷吧,这样的情况下一片灰色就毫无意义了,让人也无法下手。不过我在联网的时候通过HTML查看了那些png图片,下载了一部分到本地,这样的话本地的调用就可以看到GLargeMapControl了,marker也可以看到了,这样让人心里有点底了。第二天我就联网把这两个js文件下载了下来,为了验证是否可用,我还下载了Google的三个实例。回到家以后再来调试,发现marker可以了,但在第二个例子的时候蓝色的line没有出现,point是OK的。再次查看HTML,发现是mod_poly.js没有下载。看来mod_开头的JS文件都是Gmap的模块文件,我如果把这些所有的模块文件下载全不就可以完全实现本地调用了,而测量距离中的这个蓝色线也应该可以显示出来了。但我又不想碰到一个mod就再去下载一个mod,这要烦死人的,我通过js找到这所有的mod文件并把他们全部下载下来,免得下次再去找麻烦。那么我就要看js代码了,看Google如何去调用这些mod的,最后发现Google非常的坏,mod_poly.js中poly不是直接给出的,而是将poly、drag、jslinker、controls等这些放在了一个组中,需要调用的时候再去从这些组里调用组合成的js,总算找到环节了,搜索上述的关键字,出现有几个地方,我也不管,将这些组里的东西全部组合成mod_*.js,结果弄了100多个mod的js,第二天早上的时候我就用影音传送带(和迅雷、快车类似的玩意,就是现在已经销声匿迹了,不过比网络蚂蚁坚持的时间长一些)去下载这些所有的js,结果真正能够下载下来的js文件也就30多个,将这30多个文件放到maps2.api文件夹下,这样的话调用的时候就可以直接调用了,一般的需求应该是可以满足了。所以将example等整合好,然后打包就提供到网络上给大家下载了。如果发现无法本地调用的,可以再做交流,不过个人认为,仅仅做marker和line的,应该是足够用的了,不要小看这30多个JS,既然能够离线调用,也就是说Gmap的核心也基本上就在这么多的JS中了,喜欢研究的朋友可以研究一下这里的js,把Gmap的核心给看懂然后自己开发一个吧。(呵呵,这个当然是玩笑了,因为Google的js都是a啊b啊c啊,一点意义都没有的函数名和变量,谁看懂了就是神仙了,这里我小小的佩服一下step1的站长,K大侠早年就研究Gmap的API还是很厉害的)

写的又是很乱。最近一直在mapbar的js和Gmap API之间徘徊,一来准备将mapbar的js开放成一个API,功能要比mapbar官方的强一些,用jquery+xml,不过感觉难度很大,毕竟对于我这样不懂js的菜鸟来说,另外一个就是用Gmap API来做个东西,毕竟Gmap API还是非常的强悍的,但正是因为它的强悍,更让我顾虑我是否会用,所有的API函数都要从头学习,烦。另外我有一个想法,Gmap API既然能够本地调试,那么那么,如果我们将Google maps的地图图片(tile)的路径全部替换成自己的图片,或者直接将路径改成WMS的路径,那么一个自己定制的本地Google Map是否就可以出现了呢?

说多了,放上我的Google Maps API的离线调试代码包吧。下载地址:GoogleMapsAPI_OfflineDebugPack.rar

说明:maps_my.js文件和mapfiles文件夹是核心内容,所有的js都在里面,对于htm页面的调用只需要script调用maps_my.js文件即可,但在maps_my.js文件中的开头我添加了一个myurl的全局变量,为的是将所有js文件做成绝对路径,并且JS中确实有一个需求是要提供绝对路径,比如气泡框和控制条的png图片就需要用到绝对路径,你只需要修改这个路径为你maps_my.js文件所在路径即可。index_my.htm文件是一个最简单的实例,一个点击出气泡框的marker,example_my.htm和example2_my.htm是Google提供的示例程序,分别是标点测算距离和地理知识考题,这里能够体现point和line的效果,可以直接调用查看演示。

补充说明:如果免域名key验证方法说的不对还望指正,而mapfiles目录下的png文件要是谁能下载全那当然是最好,到时候提供给大家一份。

20090222更新一下:将标题改的更加显眼一些。下载地址也提前了一些。

Rover Tang
Mail:rover.tang[at]qq.com
Twitter(Weibo):rovertang
http://RoverTang.com

posted on 2009-02-20 08:43 Rover.Tang 阅读(9260) 评论(15) 编辑 收藏

评论

非常好的资源,感谢LZ
 回复 引用   

#2楼[楼主] 2009-02-20 11:10 Rover.Tang      
@不是野蛮人
其实这个东西差不多算是Gmap API的核心了,已经下载了33个js模块,从名称上来看就能看到一些大概,并且非常的模块化,线是线,点是点,没有线模块就无法画线,但线模块又不会影响点模块,Google真的是很厉害的。mod_poly.js:线模块;mod_drag.js:拖动模块吧;mod_lyrs.js:图层控制;mod_panoramio_iw.js:panoramio网站调用;mod_scrollwheel.js:滚轮模块;mod_wikipedia_iw.js:wikipedia网站调用;mod_youtube_iw.js:youtube调用;mod_traffic_api.js:交通信息模块;mod_zoom.js:放大模块。这些我是从文件名的猜测啦。
有兴趣的朋友们多多研究吧。
 回复 引用 查看   

#3楼 2009-04-25 16:46 fangdsf[未注册用户]
收藏了。
 回复 引用   

离线的图片文件放到什么文件夹中啊。
 回复 引用   

#5楼 2009-07-08 15:29 aosme      
老兄,这是一个问题呀,离线情况下,地图图片的文件应该放到哪里呢?
如果我们可以把网上地图的图片下载到本地,可否实现完全的离线浏览使用呢?
 回复 引用 查看   

离线的图片文件放到什么文件夹中啊。
 回复 引用   

#7楼 2009-08-06 16:11 gggg[未注册用户]
好像现在的地图地址和google地图网站上的对应不起来了
 回复 引用   

#8楼 2009-09-03 22:42 yuliroy[未注册用户]
好长`````````````
 回复 引用   

LZ,上面的问题则么不回答啊。我也想知道答案啊。还有,YOU article确实很乱
 回复 引用 查看   

#10楼[楼主] 2010-03-29 11:25 Rover.Tang      
@fangfangma
这个离线包不能使用离线地图。除非你自己分析并改动好离线的JS。另外离线地图也是要自己下载下来的吧。
 回复 引用 查看   

#11楼[楼主] 2010-03-29 11:26 Rover.Tang      
@aosme
同上。需要修改JS
 回复 引用 查看   

#12楼[楼主] 2010-03-29 11:27 Rover.Tang      
@落叶归根@じょさん
已经回复,感谢提醒。你说的乱是不是我的文章涉及到的内容太多太乱还是本文的文字内容太乱了,如果是后者的话,那也正常,本身就很罗嗦的要将一件简单的事情说完整。呵呵
 回复 引用 查看   

#13楼 2010-07-01 21:52 meiwen      
如果能再使用离线地图就好啦
 回复 引用 查看   

#14楼 2010-11-13 15:53 amudo      
谢谢楼主的软件。

下载 google map的 tile 也 非常 方便,可以分析 其中请求title图片的地址规律,例如:http://mt1.google.com/mt?n=404&v=w2.12&x=130&y=93&zoom=9 自己写个小软件下载,安规律存放,就可以访问。
楼主包中提供的tile请求地址是 采用 trsq 四叉分割法。
google现在提供的title图(瓦片金字塔)其中包含z, x,y,z-为放大等级,0--21,x,y为 该级别的 tile图片编号地址,按照 z/y/x.png 存放,即 放大等级/y/x.png 组织数据,同时修改 .html文件中的 JS函数
function customGetTileURL(a,b)


function customGetTileURL(a,b) {
//converts tile x,y into z/y/x.png string
var d=a.x;
var e=a.y;
return "googlemapdir/"+b + "/" + d + "/" + e +".png"
}

就可以使用了。


 回复 引用 查看   

#15楼 2010-11-19 11:11 SnowSpace      
怎么我下载的map的js文件 没有GValidateKey 这个函数呢
 回复 引用 查看