MapURL.info发布，送EarthURL Code

花了大概两个星期的时间来做MapURL.info这个网站，起因很简单，偶然的路过了earthURL，并且惊人的发现人家的PR是5，不就是一个“Just copy and share the URL!”的网站吗，就是一个Google earth定一个位置然后将这个URL的链接发给好友，好友打开这个链接就可以看到地球的位置，就这么简单的一个功能，能够有如此高的PR，我嫉妒了。考虑到在IE或FF中浏览Google earth是需要安装插件的，有可能很多的朋友都没有安装这个插件，那么我就用javascript版的Google Maps API开发一个，做一个Map版的，一样可以copy and share the URL，而且还不需要特殊插件，于是MapURL.info诞生了。

今天我就这两个星期做MapURL的经历来讲一下功能和技术细节，当然，都很简单，算是对网站做一个功能告知，以及技术实现的细节。

earthURL网站的功能非常的简单，你移动Google earth改变中心位置或视角，你的网址(暂且这么错误的理解吧)就发生变化，你可以将这个网址copy下来，发推的时候带上这个网址人家打开就可以知道你推中所说的位置，当然你也可以通过邮件、即时通讯工具等来分发你要别人看的这个位置。MapURL也是照搬了这样的模式，这个功能算是最主要的功能。比如你打开这个链接http://mapurl.info/#wtw3sjmu5frzm14，就可以看到一个以上海为中心的地图，非常简单就可以分享给别人你所想的地图。另外，我还做了一些简单的扩展，就是支持iframe调用，这样的话你在自己的网站或者博客中插入一个地址为http://mapurl.info/if/#wtw3sjmu5frzm14(网址中多了if)的iframe，你的这个页面就可以显示地图了。

当然我同样照搬了搜索功能，可以通过名称、地址甚至经纬度进行搜索并将结果定位，如此强大的功能实现起来非常简单，主要是因为强大的Google。当你在搜索栏输入关键字或经纬度后直接回车，就可以给你定位到搜索结果的位置，当然，其实搜索结果是非常多的，但我们只取出了第一个结果，这也许是Google认为最匹配的结果。不过不要认为这样的搜索会变的很困难，很有可能不是你想要的结果，但强大的Google自有聪明的地方，比如你想搜索出徐家汇的那个东方商厦，你输入“东方商厦”，第一个结果不是上海的，很郁闷，但请不要气馁，当你尝试搜索“上海 东方商厦”的时候，这个东方商厦就是上海的了，不过还不是我们想要的徐家汇的东方商厦，于是我们继续尝试搜索“上海 徐汇 东方商厦”，结果惊讶的发现真的是我们所要的结果哦，可见Google的模糊搜索功能是非常的强大，顺便提醒一下，这个搜索是基于Google全世界(没有Google maps的国家另说)数据的，即使你搜索美国的一个街道地址，也是能够给你直接定位的，强大吧。不过这里我做了一个小小的处理，因为上一段我们只是分享了一个网址，比如这是徐家汇东方商厦的地图http://mapurl.info/#wtw37qs6r5n5m16，但没有任何的marker，这样即使地图放大到最大，你也不一定知道想要的啥具体对象，如果有一个marker应该更好，于是通过搜索的marker就此产生了，你可以分享这个网址http://mapurl.info/#wtw37qs6r5n5m16_%E4%B8%8A%E6%B5%B7%20%E5%BE%90%E6%B1%87%20%E4%B8%9C%E6%96%B9%E5%95%86%E5%8E%A6，其实就多加了一些将关键字编码了的网址(地图地址和关键字中间用_来链接，如果你不编码网址也一样，但编码后应该更具有通用性)，但可以搜索并直接出现marker，非常直观吧。

继续往下想，既然这样，那是不是有人希望能够在地图上留言一下？当然有，比如通过地图告诉人家说“星期天我们一起去逛东方商厦吧”，那么你只需要分享这个网址就可以http://mapurl.info/#wtw37qs6r5n5m16+%E6%98%9F%E6%9C%9F%E5%A4%A9%E6%88%91%E4%BB%AC%E4%B8%80%E8%B5%B7%E5%8E%BB%E9%80%9B%E4%B8%9C%E6%96%B9%E5%95%86%E5%8E%A6%E5%90%A7，当然我把话放在了URL里，中间用加号隔开了。这应该也算是一个比较实用的功能吧。

顺便提一下，如果你直接访问网站而没有任何地图定位的话，网站会根据你的IP地址计算一个位置并将这个位置设置为地图的中心，这样应该比较合理和贴切，不过不要指望太准确哦，等我以后使用Google的Gear定位来实现的话也许会更加准确，不过这个技术还在Google的labs里。

另外，希望后期能够加入更多的功能吧，比如直接在地图上发推，或者将推直接在地图上显示，甚至以后做个留言板。当然，我相信现阶段有很多这样功能的网站，除了我个人玩玩所谓的技术外，更希望能够加入一些创意提供一些不相同的内容或形式。后面还有计划加入专题地图，甚至想用Google maps API做一个类似百度地图的东东(这样百度不知道会不会气死)，当然这些都是虚无缥缈之事，等我实现后再说，不过感叹自己的三脚猫本事实在太差，写code还真不是我的强项，有哪位大大愿意帮忙？好了，废话多说，进入技术环节，其实主要是和大家分享一下我这两个星期碰到的问题。

不刷新页面来改变网址

这句话其实是错的，因为如果网址的改变就必定会带来刷新，只是有些时候是眼睛骗了我们。你拖动地图、放大缩小地图、改变地图视图等都会发现网址发生变化，但其实变化的不是网址，是hash，就是网址中#号后面的内容，原则上是用来定位锚标记的，但现在作为关键字做一些处理产生特殊作用，我们现在就用来定义地图的位置等信息。这个所谓的不刷新页面来改变网址的功能大家也可以在Facebook和安居客地图找房这两个网站上看到效果。而技术实现竟然是惊人的简单，通过document.location.hash就可以实现，一般当你在页面发生操作的时候，你去赋予它新的值，你就会发现不刷新页面也可以改变网址了，不过我强调一下这是欺骗眼睛的做法。

坐标位置编码成字符串(Geohash实现)

earthURL网站有一套自己的将坐标位置变成字符串的function，但觉得不太好(因为越放大好像字符串越长)或者不实用(他可能考虑到GE的viewbox和视角吧)，所以没想用。然后我想到了早年写的MapBar中坐标的加密和解密(JS实现)，虽然说也是不错的方法，但我更想用新技术，大半年前看到的Geohash应该要派上用场了，并且用它的重要原因是坐标加密后得到的字符串是固定长度的。Geohash是什么？wikipedia上给出了最好的解释，是geohash.org网站作者写的一种经纬度编码方法，使用32个字符来表示经纬度坐标。经纬度坐标转换成字符串后，还可以将字符串反解成经纬度坐标，不过反解过后就成了一个bound了，好在这个bound的中心和你加密的坐标是一致的，小数点后六位是一致的，而经纬度用六位小数点表示也是最常用的方式了，而如果你只需要小数点后三位，那geohash编码后的字符串可以更加短一些。顺便要说的是，wikipedia上提供了基于python、PHP、Perl、Javascript等语言来实现的方法，图个方便就直接使用人家的JS库了，不过geohash.js在IE6下有点问题，不过修复也很简单，将53行的geohash[i]改成geohash.charAt(i)，将106行的BASE32[ch]改成BASE32.charAt(ch)，我就不提供修改后的文件给大家下载了。总的来说，Geohash很神奇吧，不过说来话长，还是推荐看一下K_Reverter的研究吧：关于geohash的简单探讨。

跨浏览器复制剪切板解决方案

如何将内容通过网页上的单击复制到剪贴板上(MapURL.info页面移动地图后底部出现网址的Copy按钮就是要实现这个功能)？看上去是一个超级简单的问题，但其实非常复杂，虽然IE可以使用一个简单JS语句实现，但好像也是类似控件的形式，并且浏览器的安全级别又不能设置太高，而其余的浏览器可能根本就不支持这样的方法，那么如何解决跨浏览器复制到剪贴板的功能呢？Zero Clipboard应该是现阶段大家认为最好的解决方案吧。使用方法可以看这一篇的中文介绍，我就不展开说了。另外如果使用jQuery的朋友可以看一下这个名为Clipboard的jQuery扩展，据说也是可以解决这个问题，实现方法个人觉得基本类似，大家可以继续研究比较一下，毕竟使用jQuery扩展的话应该使用起来要更简单一些。

通过IP地址定位你的地理坐标位置

通过访问者的IP地址定位地理坐标位置，这是一个非常有意思的功能，用户如果直接打开网站的话我就按照他的IP地址来设置地图的中心位置。那么如何实现呢？如果自己写程序来实现的话，基本思路是这样的：先从网上下载一个IP库，这个IP库带地址，然后通过地址反算出经纬度(可以使用Google maps API的反向地址解析功能)，将IP和经纬度存入数据库，然后写个程序访问数据库的接口就可以，当然如果你偷懒一些并且不担心Google反向地址解析速度的话倒可以实时解算出经纬度坐标。不过网上找了一下，IPinfoDB网站提供了现成的接口，我下载了他们的库，然后自己写了几行超级简单的PHP根据IP生成XML，然后用jQuery去解析这个XML就可以定位到地图上了。这里值得一提的是，IPinfoDB网站非常的慷慨，慷慨到让人惊讶的程度，除了提供给你XML API和JSON API调用外，还提供了实现这些API的source code和所有的IP数据库，也就是说你只要下载这份code和database你也可以架设一个和IPinfoDB一样的网站，一样能够提供API服务，不可思议吧，也许你会认为IPinfoDB很傻，但其实很聪明，一来人家是专门做这个的，你是肯定无法超越的，二是人家提供的source code不一定是他们服务器上的，试想IP数据库有300多M大小，有超过370万的数据记录，你用PHP直接查询一个数据库表，即使能够查询出一条来也不一定能够并发多少的量，所以IPinfoDB提供给我们code和database没用，你无法仿造它超越它，人家卖的就是服务，你要是频繁访问我的接口的话你就需要付费了，厉害吧，这就是不一样的商业模式。既然说到此，顺便提一下ip2location这一个网站，实现的功能和IPinfoDB完全一样，但做法不一样，人家使用PHP访问的不是数据库而是文件，数据库查询难免会发生瓶颈，而将数据库转换成特殊格式的文件，直接访问文件的速度也许要比数据库快很多(个人的猜想)，特别是针对大数据量的情况。而ip2location也开放source code，但人家不开放数据库，数据库文件你需要向他们购买。由此可见，模式不同，但结果相同，效果也是类似，我甚至怀疑ip2location和IPinfoDB是一家公司作出两套方案来让我们购买，所以同样的服务不同的商业模式值得我们深思。回到正题，使用IPinfoDB肯定也有不好的地方，一是国外网站访问速度会慢一点(不过我的站本身就布置在美国主机上，他们的速度应该不是很大问题吧)，二是国外做的IP数据库对国内来说肯定不是很全很准。不过先将就着用吧。另外，其实个人倒是想将IPinfoDB提供的数据库转换成文件，然后使用python解析，放到GAE上做一个公共的服务，不知道有谁有想并能帮实现的不？

地址解析和Adsense地图广告

其实就是Google的两个class，具体可以看GClientGeocoder和GAdsManager，我基本上算是照抄sample的吧。

好了，技术也基本都讲完了，讲的有点多，本来想分成好几篇的，毕竟这个月只在月初发表了两篇，但想想还是整合在一起做成一篇并进行分段，看大家的各取所需了，希望能够给大家带来一定的帮助吧。

最后说一下MapURL的网址：MapURL.info。花了一美刀在GD上买的info玉米(现在GD支持支付宝支付哦)，第一次使用info，希望MapURL以后的PR也能达到5吧(先让我遥想一下吧)，更希望MapURL能够带来更多的地图方面的分享吧。另外做人不能言而无信，标题中说了提供earthURL的code下载，那就请猛击这里，你会得到这份code的，如想看这份code的演示，可以围观这个地址：mapurl.tk(使用免费的.tk域名做的演示，如有需要则也可以去dot.tk免费申请注册一个，没有太大的限制)。

顺便提一下我的“众包实验：《分享上海》出书计划”的进展，虽然已经历时近一个月了，但暂时还没有任何人投稿，也没有太多的人注意，难道众包真的在大陆地区推广不开吗？难道国人真的太懒太现实而不去分享不去创造精神财富吗？想到此，心里哇凉哇凉的，不过没有关系，最多大不了我一个人扛好了，至少，我还有我的坚持。但也不得不说，码字真的是件辛苦的事情，现在是凌晨四点，这篇五千字左右的文章，花了我五个小时左右的时间。看来，我需要进一步的思考了。