有没有办法在 ionic 上的混合移动应用程序上保存离线谷歌地图？

Question

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

Answer 1

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

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

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

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