Question

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

我想仅针对预定义区域（例如城市）提供离线模式，因此我需要下载所有需要的图块，这些图块将包含大量图像，因此我想知道是否有办法google map API来下载地图的某个区域（例如在google map应用中）？
从文档中可以启用缓存，我做同样的事情（根据文档），但是，就我而言，我不想缓存用户去过的每个地方，正如我所说，我只是想缓存/下载预定义区域。
修改1
react-native-maps为此支持离线导航，我需要使用以下代码：

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

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

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

因此，我真正的问题是如何获取我所在区域的瓷砖。
我可以通过保存Google地图图块server中的图块来手动完成此操作，但是我不知道这是否合法，并且还需要大量时间和计算量（放大时，我需要计算协调下一个图块）
因此，如果google map API提供了一种下载区域图块（具有所需的缩放比例）的方法，那就很好了，
另一种选择是使用OpenStreetMAp之类的其他地图提供程序，但在这里，我还需要找到一种一次性下载所有图块的方法

Answer 1

任何更新！我还需要使用react-native-maps离线模式，因为mapbox仍然不稳定

Answer 2

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

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

这可能会给您一些支持。

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

Answer 3

如果要下载故事，可以使用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,
});

如何在React Native中离线使用谷歌地图

3 个答案: