百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

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

yuyutoo 2024-12-26 17:32 2 浏览 0 评论

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"即可获取!

相关推荐

史上最全的浏览器兼容性问题和解决方案

微信ID:WEB_wysj(点击关注)◎◎◎◎◎◎◎◎◎一┳═┻︻▄(页底留言开放,欢迎来吐槽)●●●...

平面设计基础知识_平面设计基础知识实验收获与总结
平面设计基础知识_平面设计基础知识实验收获与总结

CSS构造颜色,背景与图像1.使用span更好的控制文本中局部区域的文本:文本;2.使用display属性提供区块转变:display:inline(是内联的...

2025-02-21 16:01 yuyutoo

写作排版简单三步就行-工具篇_作文排版模板

和我们工作中日常word排版内部交流不同,这篇教程介绍的写作排版主要是用于“微信公众号、头条号”网络展示。写作展现的是我的思考,排版是让写作在网格上更好地展现。在写作上花费时间是有累积复利优势的,在排...

写一个2048的游戏_2048小游戏功能实现

1.创建HTML文件1.打开一个文本编辑器,例如Notepad++、SublimeText、VisualStudioCode等。2.将以下HTML代码复制并粘贴到文本编辑器中:html...

今天你穿“短袖”了吗?青岛最高23℃!接下来几天气温更刺激……

  最近的天气暖和得让很多小伙伴们喊“热”!!!  昨天的气温到底升得有多高呢?你家有没有榜上有名?...

CSS不规则卡片,纯CSS制作优惠券样式,CSS实现锯齿样式

之前也有写过CSS优惠券样式《CSS3径向渐变实现优惠券波浪造型》,这次再来温习一遍,并且将更为详细的讲解,从布局到具体样式说明,最后定义CSS变量,自定义主题颜色。布局...

柠檬科技肖勃飞:大数据风控助力信用社会建设

...

你的自我界限够强大吗?_你的自我界限够强大吗英文

我的结果:A、该设立新的界限...

行内元素与块级元素,以及区别_行内元素和块级元素有什么区别?

行内元素与块级元素首先,CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,分别为块级(block)、行内(inline)。块级元素:(以下列举比较常...

让“成都速度”跑得潇潇洒洒,地上地下共享轨交繁华
让“成都速度”跑得潇潇洒洒,地上地下共享轨交繁华

去年的两会期间,习近平总书记在参加人大会议四川代表团审议时,对治蜀兴川提出了明确要求,指明了前行方向,并带来了“祝四川人民的生活越来越安逸”的美好祝福。又是一年...

2025-02-21 16:00 yuyutoo

今年国家综合性消防救援队伍计划招录消防员15000名

记者24日从应急管理部获悉,国家综合性消防救援队伍2023年消防员招录工作已正式启动。今年共计划招录消防员15000名,其中高校应届毕业生5000名、退役士兵5000名、社会青年5000名。本次招录的...

一起盘点最新 Chrome v133 的5大主流特性 ?

1.CSS的高级attr()方法CSSattr()函数是CSSLevel5中用于检索DOM元素的属性值并将其用于CSS属性值,类似于var()函数替换自定义属性值的方式。...

竞走团体世锦赛5月太仓举行 世界冠军杨家玉担任形象大使

style="text-align:center;"data-mce-style="text-align:...

学物理能做什么?_学物理能做什么 卢昌海

作者:曹则贤中国科学院物理研究所原标题:《物理学:ASourceofPowerforMan》在2006年中央电视台《对话》栏目的某期节目中,主持人问过我一个的问题:“学物理的人,如果日后不...

你不知道的关于这只眯眼兔的6个小秘密
你不知道的关于这只眯眼兔的6个小秘密

在你们忙着给熊本君做表情包的时候,要知道,最先在网络上引起轰动的可是这只脸上只有两条缝的兔子——兔斯基。今年,它更是迎来了自己的10岁生日。①关于德艺双馨“老艺...

2025-02-21 16:00 yuyutoo

取消回复欢迎 发表评论: