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

【问题标题】：How to use google maps offline in react native如何在本机反应中离线使用谷歌地图
【发布时间】：2019-12-07 05:05:30
【问题描述】：

我正在尝试让用户在我的 react native 应用中离线使用地图，我正在使用react-native-maps

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

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

pathTemplate 指向我的图块位置，它必须具有以下层次结构：

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

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

【问题讨论】：

标签： android google-maps react-native openstreetmap

【解决方案1】：

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

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

这可能会给你一些支持。

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

【讨论】：

感谢您的回复，而且 react-native-maps 也支持离线地图，问题是我需要下载瓦片（png 图像），我想对于一个城市来说，我需要的不仅仅是200张图片，不知道有没有办法一次搞定主题
我现在看到了这个问题。我会为这个问题提供一些更好的答案！

【解决方案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,
});

【讨论】：