node.js - 谷歌地图 api 多标记 mongodb pug/jade

Question

我正在尝试用我的 mongodb 集合显示 map 位置，问题是只能从 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));
        }

没有循环:成功

express :

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

帮帮我，谢谢。

Answer 1

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

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