Verwendung der OverlayMapTypes-Funktion in React-Native-Map

Question

1. Bild duplizieren
2. Funktioniert nicht
3. URL-Kacheln sind serverseitige Bilder
4. Das gleiche Bild wurde mehr als 100 Mal angezeigt Dieser Code ist für das Web, wie man ihn in React-Native implementiert, ich verwende React-Native-Map

/*** @license
 *Copyright 2019 Google LLC.
 * SPDX-Lizenzkennung: Apache-2.0*/
Funktion initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    Zoom: 18,
    Mitte: {Breite: 37,783, Länge: -122,403},
  });
  const Schranken = {
    17: [
      [20969, 20970],
      [50657, 50658],
    ],
    18: [
      [41939, 41940],
      [101315, 101317],
    ],
    19: [
      [83878, 83881],
      [202631, 202634],
    ],
    20: [
      [167757, 167763],
      [405263, 405269],
    ],
  };
  const imageMapType = new google.maps.ImageMapType({
    getTileUrl: Funktion (Koordinaten, Zoom) {

      console.log("coord",coord)
      zurückkehren [
        „https://www.gstatic.com/io2010maps/tiles/5/L2_“,
        Zoomen,
        „_“,
        koord.x,
        „_“,
        koord.y,
        „.png“,
      ].verbinden("");
    },
    TileSize: neue google.maps.Size(256, 256),
  });
//cosonle.log("imageMapType",imageMapType)
  map.overlayMapTypes.push(imageMapType);
}

window.initMap = initMap;

Bitte geben Sie eine Antwort für URL-Kacheln mit React-Native-Map in React-Native

Answer 1

如何使用这段代码
import {UrlTile} from 'react-native-maps';

<MapView region={this.state.region} onRegionChange={this.onRegionChange}>
  <UrlTile
    /**
     * 瓦片服务器的url模板。运行时将替换{x} {y} {z}模式
     * 例如，http://c.tile.openstreetmap.org/{z}/{x}/{y}.png
     */
    urlTemplate={this.state.urlTemplate}
    /**
     * 此瓦片叠加层的最大缩放级别。对应于MKTileOverlay中的maximumZ设置。仅适用于iOS。
     */
    maximumZ={19}
    /**
     * flipY允许使用具有倒置的y坐标（地图左下角为原点）的瓦片。默认值为false。
     */
    flipY={false}
  />
</MapView>;