呈现html时+；使用jade在node.js中创建js页面，将html作为文本呈现，而不是html_Node.js_Google Maps_Pug_Template Engine

呈现html时+；使用jade在node.js中创建js页面，将html作为文本呈现，而不是html

node.js google-maps

呈现html时+；使用jade在node.js中创建js页面，将html作为文本呈现，而不是html,node.js,google-maps,pug,template-engine,Node.js,Google Maps,Pug,Template Engine,我正在尝试使用jade在nodejs中呈现html+js页面。我使用在线可用的html-to-jade转换器将我的html转换为jade，然后从我的nodejs应用程序进行渲染。然而，我无法正确地渲染玉石。我使用的示例是google在其google maps API文档中提供的示例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Marker animations

我正在尝试使用jade在nodejs中呈现html+js页面。我使用在线可用的html-to-jade转换器将我的html转换为jade，然后从我的nodejs应用程序进行渲染。然而，我无法正确地渲染玉石。我使用的示例是google在其google maps API文档中提供的示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Marker animations with google</title>
<style>
  html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }
  #panel {
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: -180px;
    z-index: 5;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var berlin = new google.maps.LatLng(52.520816, 13.410186);

var neighborhoods = [
new google.maps.LatLng(52.511467, 13.447179),
new google.maps.LatLng(52.549061, 13.422975),
new google.maps.LatLng(52.497622, 13.396110),
new google.maps.LatLng(52.517683, 13.394393)
];

var markers = [];
var iterator = 0;

var map;
function initialize() {
var mapOptions = {
zoom: 12,
center: berlin
};

map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}

function drop() {
for (var i = 0; i < neighborhoods.length; i++) {
setTimeout(function() {
  addMarker();
}, i * 200);
}
}

function addMarker() {
markers.push(new google.maps.Marker({
position: neighborhoods[iterator],
map: map,
draggable: false,
animation: google.maps.Animation.DROP
}));
iterator++;
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
<div id="panel" style="margin-left: -52px">
  <button id="drop" onclick="drop()">Drop Markers</button>
 </div>
<div id="map-canvas"></div>
</body>
</html>

然后我定义了generateDataForMap方法

var generateDataForMap = function(req, res, pgclient, done){
  ... some processing.....
  ..... create the required json.....
    res.render('maps_marker',json);
}

我已将maps_marker.jade文件放在视图文件夹中。

生成的jade文件无效。要修复它，您需要在

样式

和

脚本

标记后添加一个

（点字符），将它们分别转换为

样式。

和

脚本。

doctype html
html
  head
    meta(charset="utf-8")
    title Marker animations with google
    style.
      html, body, #map-canvas {
      height: 100%;
      margin: 0px;
      padding: 0px
      }
      #panel {
      position: absolute;
      top: 5px;
      left: 50%;
      margin-left: -180px;
      z-index: 5;
      background-color: #fff;
      padding: 5px;
      border: 1px solid #999;
      }
    script(src="https://maps.googleapis.com/maps/api/js?v=3.exp")
    script.
      var berlin = new google.maps.LatLng(52.520816, 13.410186);
      var neighborhoods = [
      new google.maps.LatLng(52.511467, 13.447179),
      new google.maps.LatLng(52.549061, 13.422975),
      new google.maps.LatLng(52.497622, 13.396110),
      new google.maps.LatLng(52.517683, 13.394393)
      ];
      var markers = [];
      var iterator = 0;
      var map;
      function initialize() {
      var mapOptions = {
      zoom: 12,
      center: berlin
      };
      map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
      }
      function drop() {
      for (var i = 0; i < neighborhoods.length; i++) {
      setTimeout(function() {
      addMarker();
      }, i * 200);
      }
      }
      function addMarker() {
      markers.push(new google.maps.Marker({
      position: neighborhoods[iterator],
      map: map,
      draggable: false,
      animation: google.maps.Animation.DROP
      }));
      iterator++;
      }
      google.maps.event.addDomListener(window, 'load', initialize);
  body
    #panel(style="margin-left: -52px")
      button#drop(onclick="drop()") Drop Markers
    #map-canvas

doctype html
html
头
meta（charset=“utf-8”）
标题标记与谷歌动画
风格
html，正文，#地图画布{
身高：100%；
边际：0px；
填充：0px
}
#面板{
位置：绝对位置；
顶部：5px；
左：50%；
左边距：-180px；
z指数：5；
背景色：#fff；
填充物：5px；
边框：1px实心#999；
}
脚本（src=”https://maps.googleapis.com/maps/api/js?v=3.exp")
剧本
var berlin=new google.maps.LatLng（52.520816,13.410186）；
var邻域=[
新的google.maps.LatLng（52.511467,13.447179），
新的google.maps.LatLng（52.549061,13.422975），
新的google.maps.LatLng（52.497622,13.396110），
新google.maps.LatLng（52.517683,13.394393）
];
var标记=[]；
var迭代器=0；
var映射；
函数初始化（）{
变量映射选项={
缩放：12，
中心：柏林
};
map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
}
函数drop（）{
for（var i=0；i

谢谢您的帮助。但当我尝试加载html时，html还是以文本形式加载，而不是加载html。我之前说过，我已经将jade文件命名为maps_marker.jade，并将其置于视图下。在我的API中，我将其称为res.render（maps\u marker）；能否请您用web.js服务器的相关摘录更新您的问题？谢谢您的跟进。我已经用更多的数据更新了问题。我能够加载页面。谢谢你帮我修玉。

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.post('/submit_search', function(req,res){
    console.log(JSON.stringify(req.body));
    pg.connect(database_url, function(err, pgclient, done){
            if(err)
            {
                    console.log("Error in fetching pgclient from pool");
                    res.send(500, "Load the error connection page");
            }
            else if(pgclient != null)
            {
                    console.log("Got an instance of pgclient");
                    generateDataForMap(req, res, pgclient, done);
            }
    });
});

var generateDataForMap = function(req, res, pgclient, done){
  ... some processing.....
  ..... create the required json.....
    res.render('maps_marker',json);
}

doctype html
html
  head
    meta(charset="utf-8")
    title Marker animations with google
    style.
      html, body, #map-canvas {
      height: 100%;
      margin: 0px;
      padding: 0px
      }
      #panel {
      position: absolute;
      top: 5px;
      left: 50%;
      margin-left: -180px;
      z-index: 5;
      background-color: #fff;
      padding: 5px;
      border: 1px solid #999;
      }
    script(src="https://maps.googleapis.com/maps/api/js?v=3.exp")
    script.
      var berlin = new google.maps.LatLng(52.520816, 13.410186);
      var neighborhoods = [
      new google.maps.LatLng(52.511467, 13.447179),
      new google.maps.LatLng(52.549061, 13.422975),
      new google.maps.LatLng(52.497622, 13.396110),
      new google.maps.LatLng(52.517683, 13.394393)
      ];
      var markers = [];
      var iterator = 0;
      var map;
      function initialize() {
      var mapOptions = {
      zoom: 12,
      center: berlin
      };
      map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
      }
      function drop() {
      for (var i = 0; i < neighborhoods.length; i++) {
      setTimeout(function() {
      addMarker();
      }, i * 200);
      }
      }
      function addMarker() {
      markers.push(new google.maps.Marker({
      position: neighborhoods[iterator],
      map: map,
      draggable: false,
      animation: google.maps.Animation.DROP
      }));
      iterator++;
      }
      google.maps.event.addDomListener(window, 'load', initialize);
  body
    #panel(style="margin-left: -52px")
      button#drop(onclick="drop()") Drop Markers
    #map-canvas