Question

我正在尝试使用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小提琴（使用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;')

Answer 1

我的解决方案是删除＆＃34; doctype html＆＃34;来自layout.jade的声明 - 在这里找到答案：Google Maps doesn't seen in Jade - HTML works well

Answer 2

如果您查看Leaflet站点上提供的示例的来源，例如：http://leafletjs.com/examples/quick-start-example.html，您可以看到它们通过插入来避免您在不使用Jquery的情况下遇到的问题body元素末尾的脚本：

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随意使用，所以我无法为你测试。

具有Express和Jade模板的Node.js不显示leaflet.js映射

2 个答案: