本文旨在解决在ejs模板中集成mapbox时，因json数据传递不当导致的“cannot read properties of undefined”错误。核心问题在于将json字符串错误地作为javascript字符串字面量嵌入，而非直接作为可解析的javascript对象。通过采用ejs的非转义输出标签``，可以直接将json字符串注入为有效的javascript对象，从而使mapbox能够正确访问数据并初始化地图。
EJS模板中Mapbox集成的数据传递陷阱与解决方案
在Web开发中，将后端数据动态地传递给前端JavaScript库进行渲染是常见需求。然而，在使用EJS（Embedded JavaScript）模板引擎与Mapbox等客户端JavaScript库集成时，如果数据传递方式不当，很容易遇到诸如“Cannot read properties of undefined”之类的错误。本文将深入探讨这一问题，并提供一个清晰的解决方案。
问题描述：Mapbox无法访问EJS中传递的JSON数据
当尝试在EJS模板中嵌入Mapbox地图，并使用后端传递的营地（campground）数据来定位地图中心和标记时，可能会遇到以下错误：
Uncaught TypeError: Cannot read properties of undefined (reading 'coordinates') at showPageMap.js:5:33
这个错误表明在showPageMap.js文件中，尝试访问campground.geometry.coordinates时，campground对象或其geometry属性是undefined，导致无法读取coordinates。
错误的EJS数据嵌入方式
通常，为了将服务器端的JavaScript对象传递到客户端，我们会使用JSON.stringify()将其转换为JSON字符串，然后在EJS模板中嵌入。一个常见的错误做法是将其用引号包裹，如下所示：
show.ejs (错误示例):
<script>
const mapToken = '<%=process.env.MAPBOX_TOKEN%>';
const campground = '<%= JSON.stringify(campground) %>'; // 问题所在：被引号包裹
</script>
<div id="map" style="width: 100%; height: 500px;"></div>
<script src="/javascripts/showPageMap.js"></script>在上述代码中，const campground = '<%= JSON.stringify(campground) %>'; 这行代码的本意是想将campground对象转换为JSON字符串，然后让JavaScript将其解析为一个对象。然而，由于外部的单引号或双引号，EJS渲染后，campground变量实际上被赋值为一个JavaScript字符串字面量，其内容是JSON字符串本身。
例如，如果campground对象是{"geometry":{"type":"Point","coordinates":[8.520355,47.476804]}}，那么渲染后的HTML会是：
<script>
const mapToken = 'TOKEN';
const campground = '{"geometry":{"type":"Point","coordinates":[8.520355,47.476804]}}'; // 这是一个字符串！
</script>此时，在showPageMap.js中，campground变量被视为一个普通的字符串，而不是一个JavaScript对象。因此，当尝试访问campground.geometry时，会因为字符串没有geometry属性而返回undefined，进而导致undefined.coordinates的错误。
showPageMap.js:
mapboxgl.accessToken = mapToken;
const map = new mapboxgl.Map({
container: 'map', // 容器ID
style: 'mapbox://styles/mapbox/streets-v12', // 样式URL
center: campground.geometry.coordinates, // 错误发生在这里，因为campground是字符串
zoom: 8, // 初始缩放级别
});
new mapboxgl.Marker()
.setLngLat(campground.geometry.coordinates)
.addTo(map);解决方案：使用EJS的非转义输出标签
解决这个问题的关键在于正确地将JSON字符串注入到JavaScript代码中，使其能够被JavaScript引擎解析为对象，而不是字符串字面量。EJS提供了两种输出标签：
- <%= ... %>: 转义HTML特殊字符后输出内容。适用于显示文本内容，防止XSS攻击。
- <%- ... %>: 不转义HTML特殊字符直接输出内容。适用于输出HTML片段或JSON字符串等需要保留原始格式的内容。
为了将JSON.stringify(campground)的输出直接作为JavaScript代码的一部分，我们需要使用非转义输出标签 <%- %>。
show.ejs (正确示例):
<script>
const mapToken = '<%=process.env.MAPBOX_TOKEN%>';
// 正确的做法：直接嵌入JSON字符串，不加外部引号
const campground = <%- JSON.stringify(campground) %>;
</script>
<div id="map" style="width: 100%; height: 500px;"></div>
<script src="/javascripts/showPageMap.js"></script>当使用<%- JSON.stringify(campground) %>时，EJS会直接将JSON.stringify(campground)的结果（一个有效的JSON字符串）输出到const campground =的后面，而不会额外添加引号。
渲染后的HTML将是：
<script>
const mapToken = 'TOKEN';
const campground = {"geometry":{"type":"Point","coordinates":[8.520355,47.476804]}}; // 现在这是一个JavaScript对象！
</script>此时，campground变量在客户端JavaScript中将是一个真正的JavaScript对象，拥有geometry属性和其内部的coordinates数组。showPageMap.js就可以正确地访问这些属性，Mapbox也能正常初始化。
完整代码示例
show.ejs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Campground Detail</title>
<script src='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css' rel='stylesheet' />
<!-- 其他CSS/JS引用 -->
</head>
<body>
<h1><%= campground.title %></h1>
<p><%= campground.description %></p>
<div id="map" style="width: 100%; height: 400px;"></div>
<script>
// 从环境变量获取Mapbox Token
const mapToken = '<%=process.env.MAPBOX_TOKEN%>';
// 正确地将campground对象作为JSON字符串嵌入，并让JS解析为对象
const campground = <%- JSON.stringify(campground) %>;
</script>
<script src="/javascripts/showPageMap.js"></script>
</body>
</html>showPageMap.js:
// 确保Mapbox GL JS库已加载
if (typeof mapboxgl === 'undefined') {
console.error('Mapbox GL JS library not loaded.');
} else {
mapboxgl.accessToken = mapToken; // 使用EJS中定义的mapToken
const map = new mapboxgl.Map({
container: 'map', // 地图容器的ID
style: 'mapbox://styles/mapbox/streets-v12', // Mapbox样式URL
center: campground.geometry.coordinates, // 使用campground对象的坐标
zoom: 8 // 初始缩放级别
});
// 添加地图导航控件
map.addControl(new mapboxgl.NavigationControl());
// 在地图上添加标记
new mapboxgl.Marker()
.setLngLat(campground.geometry.coordinates)
.setPopup(
new mapboxgl.Popup({ offset: 25 })
.setHTML(`<h3>${campground.title}</h3><p>${campground.location}</p>`)
)
.addTo(map);
}注意事项与最佳实践
- 理解EJS标签的区别： 务必区分<%- %>和<%- %>。当需要将服务器端变量作为原始JavaScript、HTML或JSON内容嵌入时，使用<%- %>。当输出用户输入或其他可能包含恶意HTML的文本时，使用<%= %>以防止XSS攻击。
- 数据安全性： 虽然JSON.stringify()本身会转义字符串中的特殊字符，但当嵌入到HTML中时，如果campground对象中包含可能被解释为HTML标签或脚本的内容（例如，在title或description中），仍需小心。对于显示在HTML元素中的文本，最好始终使用<%= %>。对于嵌入到JavaScript变量中的JSON，JSON.stringify()通常是安全的。
- 变量命名冲突： 确保在EJS模板中定义的JavaScript变量名（如mapToken和campground）在全局作用域或外部JavaScript文件中不会引起冲突。使用const或let进行块级作用域声明可以帮助管理变量作用域。
- 错误处理： 在showPageMap.js中，可以添加一些检查，确保campground对象及其属性确实存在，以提高代码的健壮性。例如：if (campground && campground.geometry && campground.geometry.coordinates)。
总结
在EJS模板中集成Mapbox或其他需要JavaScript对象的客户端库时，正确地将服务器端数据序列化并嵌入至关重要。核心在于理解EJS的非转义输出标签<%- %>，它允许我们将JSON.stringify()生成的JSON字符串直接作为有效的JavaScript对象字面量注入到脚本中，从而避免因类型不匹配导致的“Cannot read properties of undefined”错误。掌握这一技巧，将使您在前后端数据交互中更加游刃有余。
