【问题标题】:Google maps api multiple marker mongodb pug/jade谷歌地图 api 多标记 mongodb pug/jade
【发布时间】:2017-03-06 14:58:09
【问题描述】:

我正在尝试使用我的 mongodb 集合显示地图位置,问题只是能够从 mongodb 访问一个数据,尝试从服务器端和客户端客户端循环以显示数据但失败。这里是代码:

来自 https://gist.github.com/parth1020/4481893

的示例代码
script(type='text/javascript').
        var locations = [
            ['Bondi Beach', -33.890542, 151.274856, 4],
            ['Coogee Beach', -33.923036, 151.259052, 5],
            ['Cronulla Beach', -34.028249, 151.157507, 3],
            ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
            ['Maroubra Beach', -33.950198, 151.259302, 1]
        ];
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            center: new google.maps.LatLng(-6.2674807,106.8066466),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        var infowindow = new google.maps.InfoWindow();
        var marker, i;
        for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map
            });
            google.maps.event.addListener(marker, 'click', (function (marker, i) {
                return function () {
                    infowindow.setContent('<h3>' + '#{egstation.loc}'+ '</h3>\n' +
                        '<p>Navigasi</p>');
                    infowindow.open(map, marker);
                }
            })(marker, i));
        }

没有循环:成功

快递:

router.get('/', auth.check_login, function(req, res, next) {
    session_store = req.session;
    Egstation.find(function(err, data){
        if (err) throw err;
        console.log(data);
        res.render('index', {
            title: 'EGShare | Energy Sharing Platform',
            session_store:session_store,
            egstation: data
        });
    }).select('name lat lng loc');
});

console.log(数据)的输出:

{
    "_id" : ObjectId("58b78132c44b37103cc54180"),
    "name" : "egstation 1",
    "lat" : -6.2674807,
    "lng" : 106.8066466,
    "loc" : "Makedonia MakerSpace Jalan Pangeran Antasari No.44 RT.7 RW.7",
    "__v" : 0
}
{
    "_id" : ObjectId("58bd564b4bf9ea905c53ee72"),
    "name" : "egstation 2",
    "lat" : -5.2345634,
    "lng" : 124.2453456,
    "loc" : "Ngasal"
}

我的 index.pug

script(type='text/javascript').
    var locations = [
        ['Bondi Beach', -33.890542, 151.274856, 4],
        ['Coogee Beach', -33.923036, 151.259052, 5],
        ['Cronulla Beach', -34.028249, 151.157507, 3],
        ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
        ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(-6.2674807,106.8066466),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var infowindow = new google.maps.InfoWindow();
    var marker, i;
    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng('#{egstation[0].lat}', '#{egstation[0].lng}'),
            map: map
        });
        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infowindow.setContent('<h3>' + '#{egstation[0].loc}'+ '</h3>\n' +
                    '<p>Navigasi</p>');
                infowindow.open(map, marker);
            }
        })(marker, i));
    }

客户端中的循环不起作用

for (i = 0; i < '#{egstation.length}'; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng('#{egstation[i].lat}', '#{egstation[i].lng}'),
        map: map
    });
    google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
            infowindow.setContent('<h3>' + '#{egstation[i].loc}'+ '</h3>\n' +
                '<p>Navigasi</p>');
            infowindow.open(map, marker);
        }
    })(marker, i));
}

错误输出

TypeError: /home/mda/WebstormProjects/egsharev/views/index.pug:265
    263|         for (i = 0; i < '#{egstation.length}'; i++) {
    264|             marker = new google.maps.Marker({
  > 265|                 position: new google.maps.LatLng('#{egstation[i].lat}', '#{egstation[i].lng}'),
    266|                 map: map
    267|             });
    268|             google.maps.event.addListener(marker, 'click', (function (marker, i) {

Cannot read property 'lat' of undefined

服务器端的循环不能正常工作

router.get('/', auth.check_login, function(req, res, next) {
    session_store = req.session;
    Egstation.find(function(err, data){
        if (err) throw err;
        for (var i = 0; i < data.length; i++){
            egstation.name = data[i].name;
            egstation.lat = data[i].lat;
            egstation.lng = data[i].lng;
            egstation.loc = data[i].loc;
            res.render('index', {
                title: 'EGShare | Energy Sharing Platform',
                session_store:session_store,
                egstation: egstation
            });
        }

    }).select('name lat lng loc');
});

帮帮我,谢谢。

【问题讨论】:

    标签: node.js mongodb google-maps express pug


    【解决方案1】:

    我更喜欢区分我的服务器端代码和前端代码。 Jade/PUG 可以很好地循环 HTML 代码。 但不要循环 Javascript 变量。 更好的服务器端代码只是渲染视图而不传递任何数据。 客户端将请求另一个带有 JSON 响应的数据,以便 JavaScript 读取。

    [更新] 也许您的问题与这里相同:http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/

    【讨论】:

      猜你喜欢
      • 2015-06-02
      • 2011-12-25
      • 1970-01-01
      • 2014-11-16
      • 1970-01-01
      • 2013-06-10
      • 1970-01-01
      • 1970-01-01
      • 2012-01-02
      相关资源
      最近更新 更多