使用Express和Jade模板的Node.js不显示leaflet.js地图
我正在尝试使用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: '© <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: '© <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映射
在本地debugging时，错误返回为错误：未find映射容器。
我也试着把它包装在一个jQuery文档中，以确保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: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map); }) body #map(style='height: 500px;')
我的解决scheme是从layout.jade中删除“doctype html”语句 – 在这里find的答案： 谷歌地图在Jade中没有看到 – HTML效果很好
如果您看一下Leaflet站点上提供的示例的源代码，例如： http : //leafletjs.com/examples/quick-start-example.html ，您可以看到它们规避了您所遇到的问题，而不使用Jquery，通过在正文元素的末尾插入脚本：
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: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
这应该工作，但我没有玉在我的处置，所以我不能为你testing。