如何使用Node.js/Express/MongoDB向Google地图添加标记？

Question

我本周决定学习Node.js（我不是程序员）。到目前为止，我很享受学习的过程，但现在卡住了。我使用Express创建了一个基本应用程序。假设我有一个路由/locations。我设置我的GET请求来呈现相关视图并查找（使用Mongoose的.find方法）所有位置模型中的文档。我知道我可以像这样将文档传递给视图：

app.get('/locations', function(req, res) {
    Location.find({}, function(err, docs) {
        res.render('locations/index', {
            title: 'Locations',
            user: req.user,
            docs: docs  
        });
   });
});

例如，我可以通过以下方式在（Jade）视图中访问结果并进行列表：

if(docs.length)
    each location in docs
        p #{location.name} is at #{location.coordinates}

我想要将这些地点（每个“地点”都有存储的坐标）添加到谷歌地图中。我已经从 Google Maps API 文档中使用以下代码在视图上显示了一个例子地图。

function initialize() {
    var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
    var mapOptions = {
        zoom: 4,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    }
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    var marker = new google.maps.Marker({
        position: myLatlng,
        title: "Hello World!"
    });
    marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);

我找到了标记变量的创建和设置位置，我可以循环遍历我的“docs”，并为每个存储在我的数据库中的位置创建并设置一个标记。话虽如此，我还是太新手了，似乎无法弄清楚如何做到这一点，因为头部的脚本无法访问我传递给视图的“docs”。有什么建议吗？提前感谢，非常感谢。

- Darryl Young

Answer 1

我使用JSON.stringify()将客户端脚本需要的任何对象转换成HTML5 data-whatever属性，并插入到页面中。

例如：

//app.js
app.get('/map', function(req, res){
  var data = {
    id: '1234',
    LL: {
      lat: 42.1,
      lng: 80.8,
  };
  res.locals.docsJSON = JSON.stringify([data]);
  res.render('locations/index');
});

//jade
!!!
html
  body(data-locations=locals.docsJSON)
  script
    var docs = JSON.parse($('body').attr('data-locations'));
    console.log(docs[0].LL);

- Plato

---

感谢您的建议，非常感激。很抱歉回复和接受花了这么长时间，但至少现在已经完成了。我使用了您的想法，并将位置附加到包含地图的 div 的数据属性中。一旦我循环遍历了数据并为每个位置创建了一个标记，我就删除了数据属性。里面没有任何敏感信息，但更加清洁，而且我仍然可以在视图中查看位置，但是在渲染地图之前创建了一个数组。再次感谢！ - Darryl Young

@Plato，我该如何在地图上添加多个标记？我需要使用AJAX吗？我正在使用HTML/EJS而不是jade。 - Abhishek Dey

@AbhishekDe 要在浏览器中操作地图，你需要以某种方式将数据数组传输到客户端JavaScript。这个答案只是一个从服务器传输数组到客户端js的示例。一旦你有了数组，就可以像OP的帖子中一样逐个创建并添加标记。 - Plato