<p><ol> <li>Image Duplicate</li> <li>Not working</li> <li>url tiles are server-side images</li> <li>Same image displayed more than 100 times This code is for web, how to implement it in react-native, I am using react-native-map</li> </ol> <p><UrlTile maximumZ={ 18 } minimumZ={ 20 } tileSize={256} urlTemplate={imageUrl} opacity={1.0} zIndex={-1} tileCacheMaxAge={20} doubleTileSize={true} flipY={false} /></p> <pre class="brush:php;toolbar:false;">/*** @license *Copyright 2019 Google LLC. * SPDX License Identifier: Apache-2.0*/ function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 18, center: { lat: 37.783, lng: -122.403 }, }); const bounds = { 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: function (coord, zoom) { console.log("coord",coord) return [ "https://www.gstatic.com/io2010maps/tiles/5/L2_", zoom, "_", coord.x, "_", coord.y, ".png", ].join(""); }, tileSize: new google.maps.Size(256, 256), }); //cosonle.log("imageMapType",imageMapType) map.overlayMapTypes.push(imageMapType); } window.initMap = initMap;</pre> <p>Please provide an answer for urlTiles using react-native-map in react-native</p>

如何使用这段代码
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>;