1. 概述

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

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

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

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

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

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

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

Google地圖平臺文檔

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

Map JavaScript API

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

可選擇切換為中文

谷歌官方網(wǎng)的Map JavaScript API文檔中，除了提供API調(diào)用函數(shù)外，還有許多API調(diào)用的示例，可以通過點(diǎn)擊"Samples"進(jìn)行查看，如下圖所示。

API調(diào)用示例

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

開發(fā)者工具

在開發(fā)者工具中，當(dāng)我們每打開一個(gè)示例時(shí)，都會顯示當(dāng)前頁面中所加載的文件，當(dāng)前我們只關(guān)心需要加載的JS文件。

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

需要下載的JS文件

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

保存JS文件

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

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

以上方法是通過加載每一個(gè)示例，并找出不相同的JS文件進(jìn)行保存，比較費(fèi)時(shí)費(fèi)力。

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

加載所有JS文件

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

現(xiàn)在，我們已經(jīng)把 Google Map API 所有相關(guān)的文件保存到本地了，一共有29個(gè)JS文件，如下圖所示。

Google Map API 離線 JS 文件

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

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

下載圖片資源

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

圖片資源URL地址

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

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

圖片資源下載結(jié)果

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

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

但由于JS文件內(nèi)部還存在鏈接到官網(wǎng)的URL，因此需要將代碼進(jìn)行一定的修改。

在"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"函數(shù)中加入"return true;"，如下圖所示。

修改common.js文件代碼

現(xiàn)在需要將所有js文件中的網(wǎng)絡(luò)鏈接，替換為本地鏈接。

通過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 源碼的本地化工作就完成了。