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

Question

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

Answer 1

这是否可行取决于您的应用程序的要求。您的用户使用“现代”设备 A.K.A 是否完全支持 HTML5？您的用户需要在全局范围内查看/编辑 map ，还是仅在特定区域内查看/编辑 map ？ map 真的需要google提供吗？我将在下面解决一些问题，以向您指出解决此问题的可能方法。
你真的需要谷歌地图吗？ (最佳场景)
首先，你真的需要谷歌地图吗？同样相关:您的用户需要将他们的 map 缩放多远？如果它可以是任何 map ，并且缩放并不是真正的高优先级(如果是，包括所有 map 图 block 将使应用程序占用所有存储空间)，您可能可以将 map 图 block 用作应用程序的打包部分，并显示他们有像 http://leafletjs.com/ 这样的库.该库有据可查，并为各种 map 提供者提供了 map 界面。可以将其配置为使用您自己的本地 map 图 block 。如有必要，您可以包含多个缩放级别的 map 图 block ，并将最小/最大缩放级别限制为您实际可用的图 block 。这将使您的 map 离线工作。
我不能或不想提供自己的瓷砖 确保您确实查看了该选项，那里有提供您可以使用的 map 图 block 的系统(例如，查看 https://www.mapbox.com/)
好的，所以你真的不想按照我的建议去做。现在有哪些选择？ Javascript 映射解决方案通常根据您想要查看的 map 位置和缩放级别来渲染图 block 。这些图 block 被请求给图 block 提供者。我 不知道如何准确地为谷歌实现这一点，您可能需要对此进行一些研究 - 我会尽力帮助您找到方向。将会有从服务器获取图 block 的请求。我检查过 http://maps.google.com尝试导航 map 时加载了哪些图像:(example (click))。找出在您的情况下使用了哪些 url，我们稍后将需要这些类型的 url(只需检查浏览器控制台中的网络选项卡，并查看在您的 map 中滚动时发出了哪些请求)。 当我们只需要我们的用户在离线时在某个区域工作时我们可以在我们在线时使用服务 worker 来缓存这些请求的响应，并在我们离线时提供这些缓存。阅读有关服务人员的更多信息 here (click) .
优势 :您之前访问过的任何图 block 的真正离线 map 功能(只要您的缓存没有溢出，这取决于您的服务工作人员的实现，以及服务工作人员支持的浏览器/设备)。
缺点 :不支持从未放入缓存的切片(AKA:从未见过)。另一个:这仅适用于支持服务人员的设备。在您不关心用户使用“较旧”设备的情况下，或者您可以控制用户的设备选择的情况下，这可能是一个选项。请注意，使用 crosswalk 可以减轻您的开发工作，因为您只需要考虑一个浏览器运行时:但是 crosswalk 也不支持旧设备。
但是:这个解决方案对于需要在特定区域工作的人来说可能很好，这对于@vipul-r 提供的情况可能是正确的如果您或您的用户提前知道他们需要他们的 map 在哪里工作，您可以指示/帮助他们正确加载和缓存他们的 map 。
如果您无法使用这两种解决方案中的任何一种，那么我非常怀疑是否会有办法做到这一点。据我所知，我没有看到任何其他方法。