如何将Express的viewModel数据传递到前端JS并在Google地图绘制标记？

嘿，我刚踩过这个坑！你遇到的问题其实是Handlebars默认的字符串转换行为导致的——当你直接写{{viewModel}}时，Handlebars会把数组里的每个对象调用toString()方法，结果就变成了[object Object],[object Object]，根本不是我们需要的JSON格式数据。下面给你两种靠谱的解决办法：

方法一：直接在Handlebars中输出JSON字符串（最简单） #

你可以用JSON.stringify()把viewModel转换成JSON字符串，再通过Handlebars的无转义输出（三个大括号{{{ }}}）渲染到JS里，这样前端就能拿到正确的数组对象了。

示例代码：

<script>
  // 用三个大括号避免HTML转义，保证JSON字符串的格式正确
  var viewMarkers = {{{JSON.stringify(viewModel)}}};
  console.log(viewMarkers); // 现在就能看到完整的数组对象了

  // 接下来就可以用这个数组绘制Google地图标记了
  function initMap() {
    const map = new google.maps.Map(document.getElementById('map'), {
      center: viewMarkers[0], // 用第一个标记作为地图中心，或者自己设置
      zoom: 10
    });

    viewMarkers.forEach(markerData => {
      new google.maps.Marker({
        position: { lat: markerData.lat, lng: markerData.lng },
        map: map,
        title: markerData.name
      });
    });
  }
</script>

为什么要用三个大括号？因为Handlebars默认会把字符串里的引号转成HTML实体（比如把"变成"），这样JS解析的时候会报错。三个大括号会让内容原样输出，不做任何转义，保证JSON格式的正确性。

方法二：用AJAX请求获取数据（更灵活） #

如果你想遵循前后端分离的思路，或者需要动态加载数据，AJAX是个不错的选择。步骤很简单：

1. 后端添加API路由 #

在你的Express项目里加一个专门返回标记数据的路由：

// 假设你的app是Express实例
app.get('/api/markers', (req, res) => {
  // 这里就是你原来生成viewModel的逻辑，比如从数据库查询
  const viewModel = [
    { name: '北京', lat: 39.9042, lng: 116.4074 },
    { name: '上海', lat: 31.2304, lng: 121.4737 }
  ];
  res.json(viewModel); // 直接返回JSON格式数据
});

2. 前端用fetch请求数据 #

在Handlebars视图里写JS，通过fetch获取数据后再渲染地图：

<script>
  async function loadMarkersAndInitMap() {
    try {
      // 请求后端API
      const response = await fetch('/api/markers');
      const viewMarkers = await response.json();
      console.log(viewMarkers);

      // 初始化地图并绘制标记
      const map = new google.maps.Map(document.getElementById('map'), {
        center: viewMarkers[0],
        zoom: 10
      });

      viewMarkers.forEach(markerData => {
        new google.maps.Marker({
          position: { lat: markerData.lat, lng: markerData.lng },
          map: map,
          title: markerData.name
        });
      });
    } catch (error) {
      console.error('加载标记数据失败:', error);
    }
  }

  // 页面加载完成后执行
  window.addEventListener('load', loadMarkersAndInitMap);
</script>

两种方法的对比 #

• 方法一适合数据量小、不需要动态更新的场景，代码简单直接，一次渲染完成。
• 方法二更灵活，适合需要动态刷新数据或者前后端分离的项目，后续如果要修改数据接口，前端不需要改模板，只需要调整API请求逻辑。

内容的提问来源于stack exchange，提问作者user2305363