12

我正计划使用 ionic 开发一个混合移动应用程序。我需要的功能之一是离线谷歌地图。有没有办法做到这一点?

4

1 回答 1

7

这是否可行取决于您的应用程序的要求。您的用户使用“现代”设备 AKA 是否完全支持 HTML5?您的用户需要在全球范围内查看/编辑地图,还是仅在特定区域内查看/编辑地图?地图真的需要google提供吗?我将在下面解决一些问题,以向您指出解决此问题的可能方法。

你真的需要谷歌地图吗?(最佳场景)
首先,你真的需要谷歌地图吗?同样相关:您的用户需要将他们的地图缩放多远?如果它可以是任何地图,并且缩放并不是真正的高优先级(如果是,包括所有地图图块将使应用程序占用所有存储空间),您可能可以将地图图块用作应用程序的打包部分,并显示他们有一个像http://leafletjs.com/这样的库。该库有据可查,并为各种地图提供者提供了地图界面。可以将其配置为使用您自己的本地地图图块。如有必要,您可以包含多个缩放级别的地图图块,并将最小/最大缩放级别限制为您实际可用的图块。这将使您的地图离线工作。

我不能或不想提供我自己的图块 以确保您确实查看了该选项,那里有提供您可以使用的地图图块的系统(检查https://www.mapbox.com /例如)
好的,所以你真的不想按照我的建议去做。现在有哪些选择?Javascript 映射解决方案通常根据您想要查看的地图位置和缩放级别来渲染图块。这些图块被请求给图块提供者。不知道如何准确地为谷歌实现这个,你可能需要对此进行一些研究——我会尽力帮助你看到一个方向。将会有从服务器获取图块的请求。我检查了http://maps.google.com尝试导航地图时加载了哪些图像:(示例(单击))。找出在您的情况下使用了哪些 url,我们稍后将需要这些类型的 url(只需检查浏览器控制台中的网络选项卡并查看在您的地图中滚动时发出了哪些请求)。当我们只需要我们的用户在离线时在某个区域工作时,我们可以使用服务工作者在我们在线时缓存这些请求的响应,并在我们离线时提供这些缓存。在此处阅读有关服务人员的更多信息(单击)
优势:您之前访问过的任何图块的真正离线地图功能(只要您的缓存没有溢出,这取决于您的服务工作人员的实现,以及服务工作人员支持的浏览器/设备)。
缺点:不支持从未放入缓存的切片(AKA:从未见过)。另一个:这仅适用于支持服务人员的设备。在您不关心用户使用“较旧”设备的情况下,或者您可以控制用户的设备选择的情况下,这可能是一个选项。请注意,使用 crosswalk 可以减轻您的开发工作,因为您只需要考虑一个浏览器运行时:但是 crosswalk 也不支持旧设备。
然而:这个解决方案对于需要在特定区域工作的人来说可能很好,这对于@vipul-r 提供的情况可能是正确的如果您或您的用户提前知道他们需要他们的地图在哪里工作,您可以指示/帮助他们正确加载和缓存他们的地图。

如果您无法使用这两种解决方案中的任何一种,那么我非常怀疑是否会有办法做到这一点。据我所知,我没有看到任何其他方法。

于 2016-09-27T16:58:23.297 回答