谷歌地圖的顯示方式是如何做到的？

01-22

如題，我們打開谷歌地圖、百度地圖這類網站時，地圖是一塊一塊從灰色背景轉變成正常的地圖的，請問這種網頁製作時用到了什麼方法達成了這種效果？

整個地圖被劃分為一個個的瓦片（瓦片算是地圖領域的術語，本質上就是一個圖塊），通常瓦片大小為256x256，每一個級別的地圖都會被劃分出來。劃分好的瓦片存為一個個的圖片（也可以不保存，由伺服器端實時渲染返回）。

在載入地圖的時候需要確定視野中心點的坐標（經緯度）和級別（縮放比例），有了這兩個數據再加上瀏覽器所顯示地圖的尺寸就可以知道需要載入哪些圖片以及這些圖片出現的位置。

接下來就創建HTML的img元素，設置src，瀏覽器載入圖片，你就會看到圖片一張張的顯示在瀏覽器中。通常為了達到一個較好的效果，會優先載入中心部分的圖片。

可以閱讀這篇文章了解更多關於瓦片劃分的信息：百度地圖API詳解之地圖坐標系統

是根據當前的坐標，請求一定範圍內的地圖瓦片。

假設展示的界面是3*3，就需要9個瓦片，然後把那些灰色的區域變成取得9個瓦片。

類似的技術有openlayers ：OpenLayers 3 Examples

百度地圖的瓦片數據

地圖不是一下子完全顯示的，網速慢的話，你會發現是一塊一塊的載入的，這個一個個方塊最終填充了整個屏幕，每一個小的方塊稱為「切片」。為什麼能夠講地圖放大縮小呢？這是因為，伺服器裡面儲存有不同解析度（比例尺）的圖片，稱為金字塔結構，沒層都有若干切片。希望能夠幫助你。

不是刻意營造的效果，只是載入慢了