带有 Express 和 Jade 模板的 Node.js 不显示 Leaflet.js 地图答案

【问题标题】：Node.js with Express and Jade template not displaying leaflet.js map带有 Express 和 Jade 模板的 Node.js 不显示 Leaflet.js 地图
【发布时间】：2014-06-08 03:57:53
【问题描述】：

我正在尝试使用 Jade 模板在页面上放置地图。模板如下所示：

html
head
    script(src='http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js')
    link(rel='stylesheet', href='http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css')
    script.
        var map = L.map("map").setView([51.505, -0.09], 13);
        $(document).ready(function() {
            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
        });
body
    #map(style='height: 500px;')

查看页面时生成的 HTML 如下所示：

    <html>
  <head>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css"/>
    <script>
      var map = L.map("map").setView([51.505, -0.09], 13);
      $(document).ready(function() {
          L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
      });
    </script>
  </head>
  <body>
    <div id="map" style="height: 500px;"></div>
  </body>
</html>

将该代码添加到 JS fiddle（使用 leaflet.js 依赖项）会生成一个工作图 - 请参阅 JSfiddle Map

在本地调试时，错误返回为错误：未找到地图容器。

我还尝试将其包装在 jquery document.ready 中以确保加载 DOM。

编辑：使用正确的语法将其包装在准备好的文档中确实可以工作，下面的代码可以正常工作：

html
head
    h1= title
    p Welcome to #{title}
    script(src='http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js')
    script(src='http://code.jquery.com/jquery-2.1.0.min.js')
    link(rel='stylesheet', href='http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css')
    script.
        $(document).ready(function(){
            var map = L.map("map").setView([51.505, -0.09], 13);
            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
        })
body
    #map(style='height: 500px;')

【问题讨论】：

标签： javascript node.js express pug leaflet

【解决方案1】：

如果您查看 Leaflet 站点上提供的示例的来源，例如：http://leafletjs.com/examples/quick-start-example.html，您会发现它们通过在正文元素的结尾：

html
    head
        h1= title
        p Welcome to #{title}
        link(rel='stylesheet', href='http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css')
    body
        #map(style='height: 500px;')
        script(src='http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js')
        script.
            var map = L.map("map").setView([51.505, -0.09], 13);
            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

应该可以，但我没有 Jade 可供我使用，所以我无法为你测试它。

【讨论】：

【解决方案2】：

我的解决方案是从 layout.jade 中删除“doctype html”语句 - 在这里找到答案：Google Maps doesn't seen in Jade - HTML works well

【讨论】：