如何使用 Node.js/Express/MongoDB 向 Google 地图添加标记? [英] How can I add markers to Google Maps using Node.js/Express/MongoDB?

问题描述

这周我决定学习 Node.js(我不是程序员).到目前为止，我玩得很开心，但现在我被困住了.

I decided this week that I'd like to learn Node.js (I'm not a programmer). I've been having a lot of fun with it so far but I'm stuck at the moment.

我使用 Express 创建了一个基本应用.假设我有一条路线/位置.我将获取请求设置为呈现相关视图并在我的位置模型中查找(使用 Mongoose 的 .find 方法)所有文档.我知道我可以像这样将文档传递给视图:

I've created a basic app using Express. Let's say I have a route /locations. I set my get request to render the related view and to find (using Mongoose's .find method) all docs in my location model. I know I can pass the docs to the view like this:

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

然后，例如，我可以访问 (Jade) 视图中的结果并通过执行以下操作列出它们:

I can then, for example, access the results in the (Jade) view and list them by doing something like:

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

我想将所有这些位置(使用与每个位置"一起存储的坐标)添加到 Google 地图.我有一个示例地图显示在视图上，使用头部中的以下脚本，取自 Google Maps API 文档.

I want to add all these locations (using coordinates stored with each 'location') to a Google Map. I have an example map displaying on the view using the following script in the head, taken from the Google Maps API documentation.

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);

我想在何处创建标记变量然后设置我可以遍历我的文档"并为存储在我的数据库中的每个位置创建和设置一个标记.也就是说，我对此太陌生，我似乎无法弄清楚如何去做，因为头脑中的脚本无法访问我传递给视图的文档".

I figured where the marker variable is created then set I could loop through my 'docs' and create and set a marker for each location stored in my database. That said, I'm too new to this and I can't seem to figure out how to do it as the script in the head can't access the 'docs' that I've passed to the view.

有什么建议吗?提前致谢，非常感谢.

Any advice? Thanks in advance, it's much appreciated.

推荐答案

我 JSON.stringify() 我的客户端脚本需要的任何对象并将其插入为 HTML5 data-whatever 属性.

I JSON.stringify() any objects that my client scripts need and insert it as HTML5 data-whatever attributes.

例如:

//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);

这篇关于如何使用 Node.js/Express/MongoDB 向 Google 地图添加标记?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！