解决EJS模板中Mapbox无法运行的JSON数据传递问题-js教程-PHP中文网

解决EJS模板中Mapbox无法运行的JSON数据传递问题

花韻仙語

发布： 2025-11-22 22:49:02

原创

730人浏览过

解决EJS模板中Mapbox无法运行的JSON数据传递问题

本文旨在解决在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提供了两种输出标签：

Hour One

AI文字到视频生成

查看详情

<%= ... %>: 转义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”错误。掌握这一技巧，将使您在前后端数据交互中更加游刃有余。

以上就是解决EJS模板中Mapbox无法运行的JSON数据传递问题的详细内容，更多请关注php中文网其它相关文章！