网站首页 > 技术教程 正文
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
由于这里我们需要离线下载的是JS代码,因此选择"Maps JavaScript API",如下图所示。
如果不习惯查看英文文档,在谷歌浏览器中打开后,可以通过点击"中文(简体)"查看中文翻译说明,有助于查阅文档。
谷歌官方网的Map JavaScript API文档中,除了提供API调用函数外,还有许多API调用的示例,可以通过点击"Samples"进行查看,如下图所示。
我们通过打开浏览器的"开发者工具",可以查看打开示例时需要加载的所有文件。
在开发者工具中,当我们每打开一个示例时,都会显示当前页面中所加载的文件,当前我们只关心需要加载的JS文件。
在所有的JS文件中,只有路径中包括"zh_cn"的才是我们需要下载的JS文件,因此需要在过滤器中输入"zh_cn"进行过滤,如下图所示。
在需要保存的JS文件上单击鼠标右键后选择"Save as..."保存到本地,如下图所示。
由于单个示例中并没有加载Google Map API所有的JS文件,但所有示例应该是能完全包括所有Google Map API所有JS文件的,因此我们需要打开每一个示例,将加载的JS文件与已经下载的JS文件作对比,将还没有下载的JS文件保存到本地,如下图所示。
以上方法是通过加载每一个示例,并找出不相同的JS文件进行保存,比较费时费力。
为了以后更方便地下载最新版本 Google Map API 的 JS 源代码文件,我们整理好了一个名为"LoadAllGoogleMapAPIJSFiles.html"的Web页面,该页面调用了Google Map API 的所有JS文件,只需要在浏览器中打开该页面后并将JS文件分别保存到本地即可,如下图所示。
需要获取"LoadAllGoogleMapAPIJSFiles.html"文件,可以通过私信回复"GetGoogleMapJS"即可。
现在,我们已经把 Google Map API 所有相关的文件保存到本地了,一共有29个JS文件,如下图所示。
3. 获取最新版本Google Map API 离线源码相关图片资源
前文讲解了如何获取最新版本 Google Map API 离线源码的方法,现在我们可以用同样的方法通过打开所有 Google Map API 调用示例下载所有的图片资源,如下图所示。
同样地,如果打开每一个示例去下载图片的工作是比较繁琐的,我们已经把所有图片资源的URL链接放在了一个TXT文档中,如下图所示。
需要获取 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文件,如下图所示。
在"common.js"文件中搜索"b,e,f",然后在"function"函数中加入"return true;",如下图所示。
现在需要将所有js文件中的网络链接,替换为本地链接。
通过Nodepad++或文字处理软件一次性打开 Google Map API 离线 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 源码的本地化工作就完成了。
5. 总结
通过以上方法,你可以随时从谷歌官方网站获取最新版本的 Google Map API 离线文件源码,由于 Google Map API 在不断升级,以上具体操作细节可能随着时间的推移多少会有一定出入,但主体思路是不会有太大变化的。
以上获取最新版离线 Goolge Map API 源码的方法仅供参考,如果你有更好的获取方法,欢迎与我们交流并指正!
最后,本文中所提及的全部文档及 Google Map API 最新版 JS 源码,请通过私信回复"GetGoogleMapJS"即可获取!
- 上一篇: 谷歌地图新功能 离线地图可导航和搜索
- 下一篇: 谷歌地图正式支持离线搜索和导航功能
猜你喜欢
- 2024-11-10 谷歌将推出离线版Google Now 准确度略低
- 2024-11-10 谷歌浏览器今日更新第二个v114版本(附离线包下载地址)
- 2024-11-10 微软Edge浏览器未经许可强制安装Google Docs Offline扩展
- 2024-11-10 《水经注全国离线地图》升级至5.2
- 2024-11-10 如何获取离线安装Chrome扩展程序的包
- 2024-11-10 谷歌发布了 Android 15但普通用户无法使用
- 2024-11-10 2015谷歌I/O大会:六大精彩看点,你了解吗?
- 2024-11-10 安卓手机使用小技巧,你造吗? 安卓手机使用教程
- 2024-11-10 浏览高清gooogle卫星地图软件怎么选?我只推荐实用免费的
- 2024-11-10 怎么更新现有全国谷歌卫星地图高清影像数据到最新版?
你 发表评论:
欢迎- 最近发表
-
- 函数公式的7大潜规则,这次给你讲透了
- 数据逆向查找不止有vlookup,你该知道的三种逆向查询操作
- Vlookup函数怎么一次查找能返回多个结果?
- vlookup函数的嵌套你用过吗?一次可以引用3个表格的数据
- Vlookup函数的新用法,查询合并单元格,很多Excel高手都不知道
- 分明有数据,公式也没错,为什么vlookup还是会返回错误值
- 条件判断还在用if函数就out了,vlookup函数模糊查询一键完成
- EXCEL函数 VLOOKUP函数 HLOOKUP函数
- excel中vlookup函数的用法(excel中vlookup函数公式)
- 自动获取vlookup函数的第三参数,再也不用一列一列的数了
- 标签列表
-
- sd分区 (65)
- raid5数据恢复 (81)
- 地址转换 (73)
- 手机存储卡根目录 (55)
- tcp端口 (74)
- project server (59)
- 双击ctrl (55)
- 鼠标 单击变双击 (67)
- debugview (59)
- 字符动画 (65)
- flushdns (57)
- ps复制快捷键 (57)
- 清除系统垃圾代码 (58)
- web服务器的架设 (67)
- 16进制转换 (69)
- xclient (55)
- ps源文件 (67)
- filezilla server (59)
- 句柄无效 (56)
- word页眉页脚设置 (59)
- ansys实例 (56)
- 6 1 3固件 (59)
- sqlserver2000挂起 (59)
- vm虚拟主机 (55)
- config (61)
本文暂时没有评论,来添加一个吧(●'◡'●)