Google Maps API离线开发包(没有网络也可以开发Gmap了)

 

怎么会去搞一个离线调试包呢，为什么不直接在线调试呢？其实，主要是因为我用了大半年的免费无线被加密了，从此我就开始了我的断网生活，但又想搞点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.js和http://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更新一下：将标题改的更加显眼一些。下载地址也提前了一些。

 

原文地址：http://www.cnblogs.com/Tangf/archive/2009/02/20/1394511.html