首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >谷歌离线地图Api附获取教程[通俗易懂]

谷歌离线地图Api附获取教程[通俗易懂]

作者头像
全栈程序员站长
发布2022-11-08 11:02:57
发布2022-11-08 11:02:57
4.8K0
举报

大家好,又见面了,我是你们的朋友全栈君。

三版离线Api下载链接:https://pan.baidu.com/s/1ei6tyLKTHMIGdDuowqQW6Q 提取码:x1va

GoogleMapAPIV3来自: https://www.cnblogs.com/liongis/archive/2011/04/28/2032316.html GoogleMapsAPI_OfflineDebugPack来自: https://www.cnblogs.com/Tangf/archive/2009/02/20/1394511.html GoogleMapAPICodeDownload来自下面的获取教程

谷歌官方网站获取最新版本的 Google Map API 离线文件源码

谷歌官方地图平台文档:https://developers.google.cn/maps/documentation

开始打开谷歌官方网站的“Google官方地图平台文档” 选择“Maps JavaScript API” 离线下载的是JS代码

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

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

API调用示例 我们通过打开浏览器的“开发者工具”也就是F12,或者右键检查,可以查看打开示例时需要加载的所有文件。

开发者工具 在开发者工具中,当我们每打开一个示例时,都会显示当前页面中所加载的文件,当前我们只关心需要加载的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”文件, 现在,我们已经把 Google Map API 所有相关的文件保存到本地了,一共有29个JS文件,如下图所示。

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

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

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

图片资源URL地址 需要获取 Google Map API JS 图片资源 URL 文件, 需要特别注意的是,下载后的图片资源需要按URL中所示的路径建立相应的文夹进行存储,如下图所示。

Google Map API JS 源代码的本地化修改 到目前为止,我们已经将 Google Map API 的全部JS文件和相关的图片资源文件下载到了本地。 但由于JS文件内部还存在链接到官网的URL,因此需要将代码进行一定的修改。 在“js.js”文件中查找“zh_cn”,然后将代码“https://maps.proxy.ustclug.org/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 源码的本地化工作就完成了。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/191280.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年9月20日 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 从谷歌官方网站获取最新版本的 Google Map API 离线文件源码
  • 获取最新版本Google Map API 离线源码相关图片资源
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档