Google地图标记在Jade中的信息

时间:2014-09-08 10:23:02

标签: javascript mongodb google-maps google-maps-api-3 pug

我对编程很新,所以我的问题可能听起来非常基本,但我试图制作这个页面,其中地图显示时带有从数据库(MongoDB)加载的标记,并点击标记相关的属性(如帖子的正文,作者,发布帖子的日期和帖子的标题)将出现在一个部门中。我设法加载标记,使分割出现并消失,但我不知道将标记数据链接到分割内容的最佳方法是什么。主要是我的问题是如何在用户选择标记(位置)时显示该位置的相关帖子。我试图将这些信息作为标记的属性传递,但我没有成功。这是我的代码:

这是我的app.js代码:

var getlat = require ("./public/assets/js/data.js");
app.get('/here', function(req, res){

  getlat(function(err, latlng, id, text, date, category, feeling, hashtag, author){
    if(err){
      return res.send(500);
    } 
    console.log("loading points");
    res.render('samples', {
        latlng: latlng,
        id: id,
        category: category,
        feeling: feeling,
        hashtag: hashtag,
        author: author,
        text: text,
    });
   });
});

这是我的地图代码:

function initialize() {
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: new google.maps.LatLng(53.467216, -2.233701),
        zoom: 15,
    });

    var markers = [];
    var loc = !{
        JSON.stringify(latlng)
    };
    for (var i = 0; i < loc.length; i++) {
        var mylocation = loc[i];
        var lat = mylocation.replace(/^\"\(([0-9-.]*),.*/g, "$1");
        var lng = mylocation.replace(/.*,\s*([0-9-.]*)\)\"$/g, "$1");
        var latLng = new google.maps.LatLng(lat, lng);
        var marker = new google.maps.Marker({
            position: latLng,
            map: map
        });
        google.maps.event.addListener(marker, 'click', function (marker) {
            if ($('#story').css('display') == 'block') {
                $('#story').css('display', 'none');
                return
            } else {
                $('#story').css('display', 'block');
            }
        });
        markers.push(marker);
    }
}

google.maps.event.addDomListener(window, 'load', initialize);

和我的玉体代码:

  #map-canvas
  - for (var i = 0; i < id.length; ++i) {          
  br
  div(id='story' class='story' style='display: none;') 
    a(style='color: #21610B; font-weight: bold; font-family: \'Abril+Fatface\', serif; font-size:20px;')= hashtag[i]

非常感谢

0 个答案:

没有答案