使用react-native-map中的overlayMapTypes功能
P粉253518620
P粉253518620 2023-08-18 14:49:57
[JavaScript讨论组]

  1. 图像重复
  2. 无法正常工作
  3. url瓷砖是服务器端图像
  4. 同一图像显示超过100次 这段代码是web的,如何在react-native中实现,我正在使用react-native-map

<UrlTile maximumZ={ 18 } minimumZ={ 20 } tileSize={256} urlTemplate={imageUrl} opacity={1.0} zIndex={-1} tileCacheMaxAge={20} doubleTileSize={true} flipY={false} />

/**
 * @license
 * 版权所有 2019 Google LLC。
 * SPDX许可证标识符: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;

请提供一个在react-native中使用react-native-map的urlTiles的答案

P粉253518620
P粉253518620

全部回复(1)
P粉665679053
如何使用这段代码
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>;
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号