如何在 React Native 应用中实现 MapTiler 服务器

Question

我正在构建一个包含地图和一些标记的移动应用程序，我发现使用带有 Google API 的 react-native-maps 会花费很多。

我开始使用 MapTiler 托管我自己的地图切片服务器。

我的问题是我找不到可以在 React 原生组件中显示我的地图的库。

这是我的 MapTiler 服务器： 我不知道如何在我的 react native 应用中实现这些光栅图块。

我正在使用世博会。

我应该使用没有任何定价或商业许可的库。 如果您有好的解决方案，请举个例子。

我尝试使用 react-native-maps 但它没有显示任何图块。

        <MapView
          region={location}
          rotateEnabled={false}
          style={{ flex: 1 }}
          style={styles.map}
          showsUserLocation
          mapType="none"
        >
          <UrlTile
            tileSize={512}
            urlTemplate="http://localhost:3650/api/maps/satellite-hybrid/{z}/{x}/{y}.png"
            maximumZ={19}
          />
          <Marker
            title="Home"
            coordinate={{
              latitude: location.latitude,
              longitude: location.longitude,
            }}
          />
        </MapView>

Answer 1

能否请您查看以下文章并告诉我，您是否在其中找到了一些有用的信息？它以 MapTiler Cloud 为目标，但我相信某些原理会与 Server 非常相似。

https://documentation.maptiler.com/hc/en-us/articles/4405444890897-How-to-display-MapLibre-GL-JS-map-using-React-JS

Answer 2

问题是 react native 不理解 localhost 是什么。 我不得不将 localhost 更改为我的 IP 地址 192.168.1.1

我使用命令ipconfig从 CMD 得到它

urlTemplate="http://192.168.1.1:3650/api/maps/satellite-hybrid/{z}/{x}/{y}.png"

Answer 3

@Bassel Turky 你不需要提供谷歌地图 api 密钥吗？ react-native-maps 特别需要 google map api key。能否请您提供更多详细信息