Googleマップapi複数マーカーmongodb pug/jade

Question

私のmongodbコレクションで地図の場所を表示しようとしていますが、問題はmongodbの1つのデータにアクセスでき、サーバ側からループしようとしました&クライアント側のクライアント失敗します。ここでコード：https://gist.github.com/parth1020/4481893 LOOP WITHOUT

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

から

サンプルコード：SUCCESS

エクスプレス：

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 OF

OUTPUT（データ）：

{ 
    "_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)); 
    } 

LOOP CLIEN側では動作しません

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

ERROサーバー側でのR出力

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 

LOOPはTOO

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変数をループしないようにしてください。 サーバーサイドコードを改善すると、表示がレンダリングされ、データは渡されません。 クライアントサイドでは、JavaScriptで読みやすいJSONレスポンスの別のデータをリクエストします。

[更新] はたぶん、あなたの問題は、ここで同じです：http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/