你真的很接近，唯一的问题是变量的内部，即#{this_stuff}全部在jade的上下文中执行（它不会有google对象，因为这是客户端）。
这有点棘手，因为您在这里处理两个完全不同的 JavaScript 环境：服务器端和客户端。
所以你需要将你的jade中的服务器端变量输出到将在客户端执行的javascript代码中。
在相关说明中，您可以在脚本块中使用 Jade 变量语法，但不能做其他事情（如循环）。
首先，让我们清理它，以便您的所有script标签都在js块中（假设您使用的是示例 KeystoneJS 模板将位于<body>标签的底部）并正确生成这些配置文件：
block js
script(src='https://maps.googleapis.com/maps/api/js?key=<GOOGLE_API_KEY>&sensor=false')
script.
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(51.0360272, 3.7359072),
zoom: 8
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialise);
if data.profiles
each profile in data.profiles
script.
new google.maps.Marker({
position: new google.maps.LatLng(#{profile.address.geo[1]}, #{profile.address.geo[0]}),
map: map,
title: "#{profile.name.full}"
});
block content
.container
div(id="map-canvas", style="width:100%; height:700px;")
这越来越接近（并且 Jade 将生成您现在所期望的），但它（还）不起作用，因为您可能在函数运行之前将标记添加到地图中。initialize
它也不会转义值，因此"名称中的字符之类的东西会导致语法错误。
一种更强大的方法是填充客户端数组，然后在创建地图后循环该数组。我们还将用于JSON.stringify确保正确转义值。
block js
script(src='https://maps.googleapis.com/maps/api/js?key=<GOOGLE_API_KEY>&sensor=false')
script.
var map,
profiles = [];
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(51.0360272, 3.7359072),
zoom: 8
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
for (var i = 0; i < profiles.length; i++) {
new google.maps.Marker({
position: new google.maps.LatLng(profiles[i].geo[1], profiles[i].geo[0]),
map: map,
title: profiles[i].name
});
}
}
google.maps.event.addDomListener(window, 'load', initialise);
if data.profiles
each profile in data.profiles
script.
profiles.push({
geo: !{JSON.stringify(profile.address.geo)},
name: !{JSON.stringify(profile.name.full)}
});
block content
.container
div(id="map-canvas", style="width:100%; height:700px;")
请注意对 !{variable} 的更改，因此 JSON 不会被转义
最后，我建议profiles在您的路由文件中为视图构建数组.js，而不是在翡翠模板中进行。它更干净，并且您最终不会<script>在页面中出现大量标签。
所以你的路线看起来像这样（我假设给你一些想法，并使用下划线使代码比香草 javascript 更整洁）
var keystone = require('keystone'),
_ = require('underscore');
exports = module.exports = function(req, res) {
var view = new keystone.View(req, res),
locals = res.locals;
// Load the profiles
view.query('profiles', keystone.list('Profile').model.find());
// Create the array of profile markers
view.on('render', function(next) {
locals.profileMarkers = locals.profiles ? _.map(locals.profiles, function(profile) {
return { geo: profile.address.geo, name: profile.name.full };
}) : [];
next();
});
// Render the view
view.render('profiles');
}
然后在您的视图模板中：
block js
script(src='https://maps.googleapis.com/maps/api/js?key=<GOOGLE_API_KEY>&sensor=false')
script.
var profileMarkers = !{JSON.stringify(profileMarkers)},
map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(51.0360272, 3.7359072),
zoom: 8
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
_.each(profileMarkers, function(profile) {
new google.maps.Marker({
position: new google.maps.LatLng(profile.geo[1], profile.geo[0]),
map: map,
title: profile.name
});
});
}
google.maps.event.addDomListener(window, 'load', initialise);
block content
.container
div(id="map-canvas", style="width:100%; height:700px;")