百度地图网页端在 iPad 下为何那么清晰?[updated]

简单来说,为避免在 Retina 分辨率下出现锯齿现象需要调大字体重新配图,瓦片大小可以不调整。

一直很好奇一个问题,为何在 iPad、iPhone 下访问百度地图、google地图网页版也能如此清晰,而访问自己家的地图甚至国外很多如 OpenStreetMap 的地图也总是有很明显的锯齿,到底是切图时图片 分辨率 的问题或是使用了 @media 标签 ,纠结了很久今天终于找到答案了。

 

首先尝试在 Chrome 下访问百度地图移动版并抓取瓦片,得到地址是类似这样的:

 

发现界面与 iPad 下有所差别,在 chrome 下修改 User-Agent 为 iPhone—iOS5 再抓取到的瓦片地址是类似这样的:

 

发现有个参数很可疑,尝试把 colors=40 改成 colors=100 但变化并不大,只是道路变清晰了。

 

按照这篇博文「用 Fiddle 抓取 Safari Mobile 数据包」,抓取到一个新的地址:

 

很明显瓦片里的文字比前面的都大很多,问题找到了!
仔细看一下有两个重要的参数:fm 和 quality,

 
回过头再修改一下 PC 端的瓦片发现也是有效的。

 

结论:百度地图的瓦片是实时生成的,网页端判断为 Retina 显示屏时显示的是大字号低精度瓦片,普通的话则显示标准瓦片。

更新[2013.01.28]:
今天看到 MapBox API 里有 Retina 接口,早看到这个就不用费那么大劲了嘛。

《百度地图网页端在 iPad 下为何那么清晰?[updated]》有3个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注