Карта листовки не отображается должным образом в приложении ioni c реакции (решено) - PullRequest
Новая
       45

Карта листовки не отображается должным образом в приложении ioni c реакции (решено)

1 голос
/ 20 апреля 2020

(решено)

Я работаю над мобильным приложением, использующим реакцию с Иони c 3 , и я хочу добавить карту в один из На вкладках в браузерной версии карта выглядит правильно, но когда я ставлю мобильную версию или передаю ее на мобильную, она выходит из строя. Я оставляю изображения и исходный код. Заранее спасибо.

Not properly display in mobile

Не правильно отображается на мобильном телефоне

Properly display in web app

Правильно отобразить в веб-приложении 

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 file 

.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/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>
  );
}

MapView 

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