时间戳

首页 > 解决方案 > 离子反应应用程序中未正确显示传单地图

reactjs - 离子反应应用程序中未正确显示传单地图

问题描述

我正在使用对 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%;
}

索引.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/tachyons@4.10.0/css/tachyons.min.css"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin=""
    />

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

  <body>
    <div id="root"></div>
  </body>
</html>

编辑：

我更改了 MapLayer 和 MapView（MapView 调用 MapLayer）并且它有效。

传单版本：1.5.1 反应传单版本：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>
  );
}

地图视图

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

标签： reactjsionic-frameworkleafletopenstreetmapreact-leaflet

解决方案

推荐阅读