如何在本机反应中离线使用谷歌地图

Question

我正在尝试使用户能够在我的本机应用程序中离线使用地图，我正在使用react-native-maps

我想为预定义的区域（比如一个城市）提供离线模式，因此我需要下载所有需要的图块，这些图块将是大量图像，所以我想知道谷歌地图 API 中是否有办法下载地图的某个区域（如在谷歌地图应用程序中）？
从文档中可以启用缓存，我做同样的事情（根据文档）但是，在我的情况下，我不想缓存用户去的每个地方，因为我说我只想缓存/下载一个预定义的区域。
编辑 1
react-native-maps为此支持离线导航，我需要使用以下代码：

 <LocalTile pathTemplate={this.state.pathTemplate} tileSize={256}/>

使用 pathTemplate 指向我的瓷砖位置，该位置必须具有以下层次结构：

location/{z}/{x}/{y}

因此我真正的问题是如何获得我所在地区的瓷砖。
我可以通过从谷歌地图瓦片服务器保存瓦片来手动完成，但是我不知道它是否合法，而且会花费大量时间和计算（放大时，我需要计算下一个的坐标瓷砖）
所以如果谷歌地图 API 提供一种下载区域图块的方法（需要缩放），那就太好了，
另一种选择是使用另一个地图提供程序，如OpenStreetMAp ，但在这里，我也需要找到一种方法来一次下载所有图块

Answer 1

目前唯一支持离线映射的离线react-native模块是react-native-mapbox-gl。

<MapView>
<LocalTile
pathTemplate="../pathToLocalStoredTile.png"
tileSize={126}
/>
</MapView>

这可能会给你一些支持。

由于 Google Maps SDK 没有实现这一点，唯一的离线可能性是使用自定义图块。

Answer 2

如果你想下载故事，你可以使用 React-native MapBox 的 SnapShotManager。

参考 SnapShotManager 文档： https : //github.com/react-native-mapbox-gl/maps/blob/master/docs/snapshotManager.md

// creates a temp file png of base map
const uri = await MapboxGL.snapshotManager.takeSnap({
  centerCoordinate: [-74.126410, 40.797968],
  width: width,
  height: height,
  zoomLevel: 12,
  pitch: 30,
  heading: 20,
  styleURL: MapboxGL.StyleURL.Dark,
  writeToDisk: true, // Create a temporary file
});

// creates base64 png of base map without logo
const uri = await MapboxGL.snapshotManager.takeSnap({
  centerCoordinate: [-74.126410, 40.797968],
  width: width,
  height: height,
  zoomLevel: 12,
  pitch: 30,
  heading: 20,
  styleURL: MapboxGL.StyleURL.Dark,
  withLogo: false, // Disable Mapbox logo (Android only)
});

// creates snapshot with bounds
const uri = await MapboxGL.snapshotManager.takeSnap({
  bounds: [[-74.126410, 40.797968], [-74.143727, 40.772177]],
  width: width,
  height: height,
  styleURL: MapboxGL.StyleURL.Dark,
});