微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

本周我决定学习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);

我想到了标记变量的创建位置然后设置我可以遍历我的’docs’并为我的数据库中存储的每个位置创建和设置标记.也就是说,我太新了,我似乎无法弄清楚如何做到这一点,因为头部的脚本无法访问我传递给视图的’文档’.

任何建议?在此先感谢,非常感谢.

解决方法

我JSON.stringify()我的客户端脚本需要的任何对象,并将其作为HTML5数据插入 – 无论什么属性.

例如:

//app.js
app.get('/map',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);

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐