传单 - 地图不显示

Question

我正在使用带 openstreetmap 的传单。但是，我无法正确渲染地图。

在下面找到我的最小可行示例。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Land</title>

    <link
      href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div id="Karte" style="height: 100%; width: 100%"></div>
  </body>

  <script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>

  <script>
    var Karte = L.map("Karte").setView([43.00, -79.00], 10);
    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution:
        'Kartendaten &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
      useCache: true,
    }).addTo(Karte);

  </script>
</html>

对我做错了什么有什么建议吗？

Answer 1

错误来自您添加到 Kart 的样式。 100% 的 0 将导致 0px。您应该按照文档中的说明设置固定的高度或宽度。

Make sure the map container has a defined height, for example by setting it in CSS

例如，您可以使用 #Karte { height: 180px; }

#Karte { height: 180px; }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Land</title>

    <link
      href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div id="Karte"></div>
  </body>

  <script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>

  <script>
    var Karte = L.map("Karte").setView([43.00, -79.00], 10);
    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution:
        'Kartendaten &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
      useCache: true,
    }).addTo(Karte);

  </script>
</html>

传单 - 地图不显示

Leaflet - Map does not show

javascript

leaflet