react-native - React Native map UrlTile

Question

我尝试在 UrlTile 中使用 openstreetmap 图 block ，但我得到了重复的图层、openstreetmap 和默认谷歌地图，如何删除谷歌地图图层？

这是我的组件:

import { StyleSheet, Text, View, Button } from "react-native";
import MapView, {
  PROVIDER_GOOGLE,
  MAP_TYPES,
  PROVIDER_DEFAULT,
  UrlTile,
  Marker,
} from "react-native-maps";
import React, { useEffect } from "react";

export default function Home({ navigation }) {
  let location = {
    latitude: 23.259933,
    longitude: 77.412613,
    latitudeDelta: 0.009,
    longitudeDelta: 0.009,
  };

  return (
    <View style={styles.container}>
      <View style={styles.myMap}>
        <MapView
          region={location}
          rotateEnabled={false}
          style={{ flex: 1 }}
          style={styles.map}
          showsUserLocation
        >
          <UrlTile
            urlTemplate="https://a.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png"
            maximumZ={19}
          />
          <Marker
            title="Home"
            coordinate={{
              latitude: location.latitude,
              longitude: location.longitude,
            }}
          />
        </MapView>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#ffd",
    alignItems: "center",
    justifyContent: "center",
  },
  btn1: {
    margin: 20,
  },
  btn2: {
    margin: 20,
  },
  btns: {
    flex: 1,
    flexDirection: "row",
    backgroundColor: "grey",
  },
  myMap: {
    flex: 2,
    backgroundColor: "white",
    width: "100%",
    marginTop: 30,
    marginBottom: 30,
  },
  map: {
    width: "100%",
    height: "100%",
  },
});

此外，当我用我自己的 MapTiler 服务器图 block 切换 openstreetmap 图 block 时，它不会显示任何内容，仅显示谷歌地图

'http://localhost:3650/api/maps/satellite-hybrid/{z}/{x}/{y}.png'

最后一件事，我需要知道这是否会让我付出代价，我需要使用 Google API key 来运行 React-native-maps 库，我需要一些解释。

提前谢谢您。

Answer 1

将其添加到您的 MapView。

mapType={Platform.OS == "android" ? "none" : "standard"}

或

mapType={Platform.OS == "ios" ? "none" : "standard"}

您可以在此页面上找到更多信息https://github.com/react-native-maps/react-native-maps#tile-overlay-using-local-tiles