帶有Express和Jade模板的Node.js不顯示leaflet.js映射

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地圖

在本地調試時，錯誤會以“ 錯誤：未找到地圖容器”的形式返回。

我還嘗試將其包裝在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

對我來說，解決方案是從layout.jade中刪除“ doctype html”語句-在此處找到答案：在Jade中未看到Google Maps-HTML效果很好

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 個解決方案

解決方案1
0 2014-12-02 04:22:40

解決方案2
0 2014-12-02 07:01:36

帶有Express和Jade模板的Node.js不顯示leaflet.js映射

問題描述

2 個解決方案

解決方案1 0 2014-12-02 04:22:40

解決方案2 0 2014-12-02 07:01:36

解決方案1
0 2014-12-02 04:22:40

解決方案2
0 2014-12-02 07:01:36