如何在 Angular/Ionic App 中离线使用 Google Maps API

Question

我有一个 Angular 12 Ionic 应用程序，它通过 @angular/google-maps 包 (https://github.com/angular/components/tree/master/src/google-maps#readme) 使用 Google Maps API。我们正在构建的应用程序将用于互联网访问最多可能参差不齐的区域。当互联网丢失时，我们正在尝试维护地图的功能。 IE，如果我们离线，可能会在本地缓存或存储加载的地图以供参考。

1. 当我们初始化地图并加载任何折线和标记时，我们希望用户在线

2. 如果用户随后下线并在应用程序中导航，当返回地图时，我们希望显示之前加载的地图、折线和标记。

当前发生的情况是组件被销毁，然后在导航回时重新加载，导致地图重新加载，因为我们处于离线状态，所以无法重新加载。但是，如果我们能够缓存或本地存储该地图，那么我们可以从缓存/本地加载它，直到用户重新在线。

使用上述包，我们正在尝试将 google.maps 对象序列化为 json 以进行存储，但这会导致问题。

let mapTest: google.maps.Map;
const center: google.maps.LatLngLiteral = { lat: centerPoint.lat, lng: centerPoint.lng };

mapTest = new google.maps.Map(document.getElementById('map') as HTMLElement, {
   center,
   zoom: 11
});

这是 Google API 文档 (https://developers.google.com/maps/documentation/javascript/using-typescript) 提供的基本打字稿实现。当我们尝试对地图进行字符串化时，会出现以下错误

如果我们对 mapTest.data 进行字符串化，也会出现同样的错误。

问题是，我们可以做些什么来本地存储 google.map 对象或 google.map.data 对象吗？这最终将被放置到使用 Ionic 的 Android 设备上，使用原生 Android 地图可以实现这样的事情吗？或者这根本不是一个可行的任务

Answer 1

Google Maps JavaScript API 不能离线使用。

查看功能请求：API feature to download a map for offline use。