Menggunakan ciri overlayMapTypes dalam peta asli bertindak balas

Question

1. Pendua Imej
2. Tidak berfungsi
3. jubin url ialah imej sebelah pelayan
4. Imej yang sama dipaparkan lebih daripada 100 kali Kod ini adalah untuk web, bagaimana untuk melaksanakannya dalam react-native, saya menggunakan react-native-map

/*** @lesen
 *Hak Cipta 2019 Google LLC.
 * Pengecam Lesen SPDX: Apache-2.0*/
fungsi initMap() {
  peta const = google.maps.Map(document.getElementById("map") baharu, {
    zum: 18,
    pusat: { lat: 37.783, lng: -122.403 },
  });
  sempadan const = {
    17: [
      [20969, 20970],
      [50657, 50658],
    ],
    18: [
      [41939, 41940],
      [101315, 101317],
    ],
    19: [
      [83878, 83881],
      [202631, 202634],
    ],
    20: [
      [167757, 167763],
      [405263, 405269],
    ],
  };
  const imageMapType = google.maps.ImageMapType baharu({
    getTileUrl: fungsi (coord, zum) {

      console.log("coord",coord)
      kembali [
        "https://www.gstatic.com/io2010maps/tiles/5/L2_",
        zum,
        "_",
        koordinat.x,
        "_",
        coord.y,
        ".png",
      ].join("");
    },
    jubinSize: google.maps.Size baharu (256, 256),
  });
//cosonle.log("imageMapType",imageMapType)
  map.overlayMapTypes.push(imageMapType);
}

window.initMap = initMap;

Sila berikan jawapan untuk urlTiles menggunakan react-native-map dalam 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>;