一尘不染

如何使用Node.js / Express / MongoDB将标记添加到Google Maps?

node.js

我本周决定要学习Node.js(我不是程序员)。到目前为止,我一直在享受它的乐趣,但此刻我被困住了。

我已经使用Express创建了一个基本应用。假设我有一条路线/位置。我设置了我的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
Map。我有一个示例地图,该示例使用顶部的以下脚本显示在视图上,该脚本取自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);

我确定了标记变量的创建位置,然后进行设置。我可以遍历“文档”,并为数据库中存储的每个位置创建和设置标记。就是说,我对此还太陌生,而且由于头中的脚本无法访问传递给视图的“文档”,因此我似乎无法弄清楚该如何做。

有什么建议吗?在此先感谢您,非常感谢。


阅读 201

收藏
2020-07-07

共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);
2020-07-07