如何使用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创建了一个基本的应用程序。假设我有一个路线/位置。我设置我的get请求来渲染相关视图，并在我的位置模型中查找（使用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  
        });
   });
});

例如，我可以访问（翡翠）视图中的结果，并通过做如下所示：

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

我想到了创建标记变量的位置，然后设置我可以循环通过我的'docs'创建和为我的数据库中存储的每个位置设置一个标记。也就是说，我对此并不陌生，我似乎无法弄清楚如何做到这一点，因为脚本中的脚本无法访问我传递给视图的docs。

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 数据 - 无论属性。

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屋！