您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

最新版 GoogleMap API 离线源码下载技术分享

时间:2020-07-21 10:37:15  来源:  作者:

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

最新版 GoogleMap API 离线源码下载技术分享

Google地图平台文档

由于这里我们需要离线下载的是JS代码,因此选择"Maps JAVAScript API",如下图所示。

最新版 GoogleMap API 离线源码下载技术分享

Map JavaScript API

如果不习惯查看英文文档,在谷歌浏览器中打开后,可以通过点击"中文(简体)"查看中文翻译说明,有助于查阅文档。

最新版 GoogleMap API 离线源码下载技术分享

可选择切换为中文

谷歌官方网的Map JavaScript API文档中,除了提供API调用函数外,还有许多API调用的示例,可以通过点击"Samples"进行查看,如下图所示。

最新版 GoogleMap API 离线源码下载技术分享

API调用示例

我们通过打开浏览器的"开发者工具",可以查看打开示例时需要加载的所有文件。

最新版 GoogleMap API 离线源码下载技术分享

开发者工具

在开发者工具中,当我们每打开一个示例时,都会显示当前页面中所加载的文件,当前我们只关心需要加载的JS文件。

在所有的JS文件中,只有路径中包括"zh_cn"的才是我们需要下载的JS文件,因此需要在过滤器中输入"zh_cn"进行过滤,如下图所示。

最新版 GoogleMap API 离线源码下载技术分享

需要下载的JS文件

在需要保存的JS文件上单击鼠标右键后选择"Save as..."保存到本地,如下图所示。

最新版 GoogleMap API 离线源码下载技术分享

保存JS文件

由于单个示例中并没有加载Google Map API所有的JS文件,但所有示例应该是能完全包括所有Google Map API所有JS文件的,因此我们需要打开每一个示例,将加载的JS文件与已经下载的JS文件作对比,将还没有下载的JS文件保存到本地,如下图所示。

最新版 GoogleMap API 离线源码下载技术分享

对比保存还未下载的JS文件

以上方法是通过加载每一个示例,并找出不相同的JS文件进行保存,比较费时费力。

为了以后更方便地下载最新版本 Google Map API 的 JS 源代码文件,我们整理好了一个名为"LoadAllGoogleMapAPIJSFiles.html"的Web页面,该页面调用了Google Map API 的所有JS文件,只需要在浏览器中打开该页面后并将JS文件分别保存到本地即可,如下图所示。

最新版 GoogleMap API 离线源码下载技术分享

加载所有JS文件

需要获取"LoadAllGoogleMapAPIJSFiles.html"文件,可以通过私信回复"GetGoogleMapJS"即可。

现在,我们已经把 Google Map API 所有相关的文件保存到本地了,一共有29个JS文件,如下图所示。

最新版 GoogleMap API 离线源码下载技术分享

Google Map API 离线 JS 文件

3. 获取最新版本Google Map API 离线源码相关图片资源

前文讲解了如何获取最新版本 Google Map API 离线源码的方法,现在我们可以用同样的方法通过打开所有 Google Map API 调用示例下载所有的图片资源,如下图所示。

最新版 GoogleMap API 离线源码下载技术分享

下载图片资源

同样地,如果打开每一个示例去下载图片的工作是比较繁琐的,我们已经把所有图片资源的URL链接放在了一个TXT文档中,如下图所示。

最新版 GoogleMap API 离线源码下载技术分享

图片资源URL地址

需要获取 Google Map API JS 图片资源 URL 文件,可以通过私信回复"GetGoogleMapJS"即可。

需要特别注意的是,下载后的图片资源需要按URL中所示的路径建立相应的文夹进行存储,如下图所示。

最新版 GoogleMap API 离线源码下载技术分享

图片资源下载结果

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文件,如下图所示。

最新版 GoogleMap API 离线源码下载技术分享

修改js.js文件代码

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

最新版 GoogleMap API 离线源码下载技术分享

修改common.js文件代码

现在需要将所有js文件中的网络链接,替换为本地链接。

通过Nodepad++或文字处理软件一次性打开 Google Map API 离线 JS 源代码文件,如下图所示。

最新版 GoogleMap API 离线源码下载技术分享

打开所有JS文件

将所有js文件中的URL链接"https://maps.gstatic.com/mapfiles/api-3/"替换为"GoogleMapAPI/mapfiles/",目的是为了加载本地的图片资源,如下图所示。

最新版 GoogleMap API 离线源码下载技术分享

源码本地化处理

方法同理,再将所有js文件中的URL链接"https://maps.gstatic.com/mapfiles/"替换为"GoogleMapAPI/mapfiles/";将所有js文件中的URL链接"api-3/images/"替换为"GoogleMapAPI/mapfiles/images/",目的也是为了加载本地的图片资源。

至此,将 Google Map API 的离线 JS 源码的本地化工作就完成了。

5. 总结

通过以上方法,你可以随时从谷歌官方网站获取最新版本的 Google Map API 离线文件源码,由于 Google Map API 在不断升级,以上具体操作细节可能随着时间的推移多少会有一定出入,但主体思路是不会有太大变化的。

以上获取最新版离线 Goolge Map API 源码的方法仅供参考,如果你有更好的获取方法,欢迎与我们交流并指正!

最后,本文中所提及的全部文档及 Google Map API 最新版 JS 源码,请通过私信回复"GetGoogleMapJS"即可获取!



Tags:GoogleMap   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
1. 概述我们曾分享过《基于 GoogleMap 离线API在内网中加载离线卫星地图的方法》一文,在该文中我们分享了将GoogleMap离线API源码部署到本地的方法。那么这个GoogleMap离线AP...【详细内容】
2020-07-21  Tags: GoogleMap  点击:(114)  评论:(0)  加入收藏
▌简易百科推荐
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  项目与数据管理    Tags:Vue   点击:(1)  评论:(0)  加入收藏
程序是如何被执行的  程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  IT学习日记    Tags:程序   点击:(9)  评论:(0)  加入收藏
阅读收获✔️1. 了解单点登录实现原理✔️2. 掌握快速使用xxl-sso接入单点登录功能一、早期的多系统登录解决方案 单系统登录解决方案的核心是cookie,cookie携带会话id在浏览器...【详细内容】
2021-12-23  程序yuan    Tags:单点登录(   点击:(8)  评论:(0)  加入收藏
下载Eclipse RCP IDE如果你电脑上还没有安装Eclipse,那么请到这里下载对应版本的软件进行安装。具体的安装步骤就不在这赘述了。创建第一个标准Eclipse RCP应用(总共分为六步)1...【详细内容】
2021-12-22  阿福ChrisYuan    Tags:RCP应用   点击:(7)  评论:(0)  加入收藏
今天想简单聊一聊 Token 的 Value Capture,就是币的价值问题。首先说明啊,这个话题包含的内容非常之光,Token 的经济学设计也可以包含诸多问题,所以几乎不可能把这个问题说的清...【详细内容】
2021-12-21  唐少华TSH    Tags:Token   点击:(9)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Mason程    Tags:VUE   点击:(14)  评论:(0)  加入收藏
什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么时候来进行性能调优?(who) 怎么样进行性能调优?(How) 硬件配...【详细内容】
2021-12-16  软件测试小p    Tags:性能调优   点击:(19)  评论:(0)  加入收藏
Tasker 是一款适用于 Android 设备的高级自动化应用,它可以通过脚本让重复性的操作自动运行,提高效率。 不知道从哪里听说的抖音 app 会导致 OLED 屏幕烧屏。于是就现学现卖,自...【详细内容】
2021-12-15  ITBang    Tags:抖音防烧屏   点击:(23)  评论:(0)  加入收藏
11 月 23 日,Rust Moderation Team(审核团队)在 GitHub 上发布了辞职公告,即刻生效。根据公告,审核团队集体辞职是为了抗议 Rust 核心团队(Core team)在执行社区行为准则和标准上...【详细内容】
2021-12-15  InfoQ    Tags:Rust   点击:(24)  评论:(0)  加入收藏
一个项目的大部分API,测试用例在参数和参数值等信息会有很多相似的地方。我们可以复制API,复制用例来快速生成,然后做细微调整既可以满足我们的测试需求1.复制API:在菜单发布单...【详细内容】
2021-12-14  AutoMeter    Tags:AutoMeter   点击:(20)  评论:(0)  加入收藏
相关文章
    无相关信息
最新更新
栏目热门
栏目头条