传单贴图未在离子反应应用程序中正确显示（已解决）

Question

（已解决）

我正在使用与Ionic 3一起反应]在移动应用程序上工作，我想在其中一个标签中添加地图，在浏览器版本中，地图看起来正确，但是当我放置移动版本或通过它到手机它失败了。我留下图像和源代码。预先感谢。

const MapLayer = (props: any) => {
let center = props.center || null;

return (
<React.Fragment>
  <Map center={center} zoom={13}>
    <TileLayer url="https://{s}.tile.openstreetmap.de/{z}/{x}/{y}.png" />
  </Map>
</React.Fragment>
);
};
CSS文件

.leaflet-container {
 width: 100%;
 height: 100%;
}
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Ionic App</title>

    <base href="/" />

    <meta
      name="viewport"
      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <link
      rel="shortcut icon"
      type="image/png"
      href="%PUBLIC_URL%/assets/icon/favicon.png"
    />
    <!-- add to homescreen for ios -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-title" content="Ionic App" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />

    <link
      rel="stylesheet"
      href="https://unpkg.com/[email protected]/css/tachyons.min.css"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/[email protected]/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin=""
    />

    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script
      src="https://unpkg.com/[email protected]/dist/leaflet.js"
      integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
      crossorigin=""
    ></script>
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>
编辑：

我更改了MapLayer和MapView（MapView调用MapLayer），并且可以使用。

传单版本：1.5.1react-leaflet版本：2.5.0

export default function MapLayer(props) {
  const inputEl = useRef(null);
  useEffect(() => {
    props.setLeafletElement(inputEl.current.leafletElement);
  });

  return (
    <Map ref={inputEl} center={[51.505, -0.09]} zoom={13}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
    </Map>
  );
}
MapView

...
<MapLayer setLeafletElement={setLeafletElement} />

（已解决）我正在使用与Ionic 3进行交互的移动应用程序，我想在其中一个选项卡中添加地图，在浏览器版本中，地图看起来正确，但是当我放置移动版本时...

Answer 1

我有同样的问题。您可以通过传单向我展示所有代码吗？

传单贴图未在离子反应应用程序中正确显示（已解决）

问题描述投票：2回答：1

1个回答

最新问题

传单贴图未在离子反应应用程序中正确显示（已解决）

问题描述 投票：2回答：1

1个回答

最新问题

问题描述投票：2回答：1