1. 概述

我們曾分享過《基于 googleMap 離線API在內網中加載離線衛星地圖的方法》一文，在該文中我們分享了將GoogleMap離線API源碼部署到本地的方法。

那么這個GoogleMap離線API是從哪里來的呢？

由于它并不像OpenLayers和MapBox等開源平臺一樣提供源碼下載鏈接，因此只有將GoogleMap相關的JS源代碼文件從GoogleMap官方網站解析下載到本地，這樣才可以進行離線開發應用。

這里，我們就來分析一下從谷歌官方網站將GoogleMap API 源碼離線下載到本地的方法。

2. 獲取最新版本Google Map API 離線源碼

通過以下網址打開谷歌官方網站的"Google地圖平臺文檔"。

https://developers.google.cn/maps/documentation

Google地圖平臺文檔

由于這里我們需要離線下載的是JS代碼，因此選擇"Maps JAVAScript API"，如下圖所示。

Map JavaScript API

如果不習慣查看英文文檔，在谷歌瀏覽器中打開后，可以通過點擊"中文（簡體）"查看中文翻譯說明，有助于查閱文檔。

可選擇切換為中文

谷歌官方網的Map JavaScript API文檔中，除了提供API調用函數外，還有許多API調用的示例，可以通過點擊"Samples"進行查看，如下圖所示。

API調用示例

我們通過打開瀏覽器的"開發者工具"，可以查看打開示例時需要加載的所有文件。

開發者工具

在開發者工具中，當我們每打開一個示例時，都會顯示當前頁面中所加載的文件，當前我們只關心需要加載的JS文件。

在所有的JS文件中，只有路徑中包括"zh_cn"的才是我們需要下載的JS文件，因此需要在過濾器中輸入"zh_cn"進行過濾，如下圖所示。

需要下載的JS文件

在需要保存的JS文件上單擊鼠標右鍵后選擇"Save as..."保存到本地，如下圖所示。

保存JS文件

由于單個示例中并沒有加載Google Map API所有的JS文件，但所有示例應該是能完全包括所有Google Map API所有JS文件的，因此我們需要打開每一個示例，將加載的JS文件與已經下載的JS文件作對比，將還沒有下載的JS文件保存到本地，如下圖所示。

對比保存還未下載的JS文件

以上方法是通過加載每一個示例，并找出不相同的JS文件進行保存，比較費時費力。

為了以后更方便地下載最新版本 Google Map API 的 JS 源代碼文件，我們整理好了一個名為"LoadAllGoogleMapAPIJSFiles.html"的Web頁面，該頁面調用了Google Map API 的所有JS文件，只需要在瀏覽器中打開該頁面后并將JS文件分別保存到本地即可，如下圖所示。

加載所有JS文件

需要獲取"LoadAllGoogleMapAPIJSFiles.html"文件，可以通過私信回復"GetGoogleMapJS"即可。

現在，我們已經把 Google Map API 所有相關的文件保存到本地了，一共有29個JS文件，如下圖所示。

Google Map API 離線 JS 文件

3. 獲取最新版本Google Map API 離線源碼相關圖片資源

前文講解了如何獲取最新版本 Google Map API 離線源碼的方法，現在我們可以用同樣的方法通過打開所有 Google Map API 調用示例下載所有的圖片資源，如下圖所示。

下載圖片資源

同樣地，如果打開每一個示例去下載圖片的工作是比較繁瑣的，我們已經把所有圖片資源的URL鏈接放在了一個TXT文檔中，如下圖所示。

圖片資源URL地址

需要獲取 Google Map API JS 圖片資源 URL 文件，可以通過私信回復"GetGoogleMapJS"即可。

需要特別注意的是，下載后的圖片資源需要按URL中所示的路徑建立相應的文夾進行存儲，如下圖所示。

圖片資源下載結果

4. Google Map API JS 源代碼的本地化修改

到目前為止，我們已經將 Google Map API 的全部JS文件和相關的圖片資源文件下載到了本地。

但由于JS文件內部還存在鏈接到官網的URL，因此需要將代碼進行一定的修改。

在"js.js"文件中查找"zh_cn",然后將代碼"https://maps.googleapis.com/maps-api-v3/api/js/41/5/intl/zh_cn"

替換為"GoogleMapAPI/js"，目的是為了加載本地的所需功能模塊js文件，如下圖所示。

修改js.js文件代碼

在"common.js"文件中搜索"b,e,f"，然后在"function"函數中加入"return true;"，如下圖所示。

修改common.js文件代碼

現在需要將所有js文件中的網絡鏈接，替換為本地鏈接。

通過Nodepad++或文字處理軟件一次性打開 Google Map API 離線 JS 源代碼文件，如下圖所示。

打開所有JS文件

將所有js文件中的URL鏈接"https://maps.gstatic.com/mapfiles/api-3/"替換為"GoogleMapAPI/mapfiles/"，目的是為了加載本地的圖片資源，如下圖所示。

源碼本地化處理

方法同理，再將所有js文件中的URL鏈接"https://maps.gstatic.com/mapfiles/"替換為"GoogleMapAPI/mapfiles/"；將所有js文件中的URL鏈接"api-3/images/"替換為"GoogleMapAPI/mapfiles/images/",目的也是為了加載本地的圖片資源。

至此，將 Google Map API 的離線 JS 源碼的本地化工作就完成了。