2015-03-24 7 views
0

Я хочу построить несколько маркеров на карте Google. Я использую NodeJS для извлечения маркеров и HTML в качестве интерфейса.Построение нескольких маркеров на картах google с помощью nodejs

Вот сценарий узел:

app.get('/blood',function(req,res){ 
    var l = []; 
    l.push(['1',23.567,88.645,1]); 
    l.push(['2',23.560,88.647,2]); 
    console.log(JSON.stringify(l)); 
    res.render('../public/blood.ejs',{ layout: false, lat:23.567, lon:88.678, l:l}); 
}); 

Вот HTML:

<script type="text/javascript"> 
     function initialize() { 

     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-canvas'), { 
     zoom: 10, 
     center: new google.maps.LatLng(-33.92, 151.25), 
     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(locations[i][0]); 
      infowindow.open(map, marker); 
     } 
     })(marker, i)); 
    } 
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 

я использовал только статические места в коде. Как я могу динамически использовать маркеры на Картах Google?

Просьба предложить. Спасибо.

EDIT:

Он должен выглядеть следующим образом: enter image description here

Вместо этого он не делает карту:

enter image description here

ответ

1

Похоже, вы передаете массив местоположений для просмотра. Но я совершенно не уверен, какие первые и последние элементы вы нажимаете на массив.

l.push(['1',23.567,88.645,1]); // Возможно, вам понадобится нажать элементы в правильном формате здесь.

В любом случае после прохождения л массив для просмотра можно просто назначить его маркеры переменной в файл представления:

<script type="text/javascript"> 
     function initialize() { 
     var locations = <%- l %> 

    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
     zoom: 10, 
     center: new google.maps.LatLng(-33.92, 151.25), 
     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(locations[i][0]); 
      infowindow.open(map, marker); 
     } 
     })(marker, i)); 
    } 
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
+0

Это в основном правильно, но при печати объекта в HTML-файл, вы должны использовать '<%- ... %>' а не '<%= ... %>' [(источник)] (http://stackoverflow.com/questions/13788314/express-and-ejs-to-render-a-json) - это напечатает объект как есть (который будет действительный javascript) в отличие от HTML (это не так) – ttarik

+0

@ ev0lution correct. Я отредактировал ответ. – Yalamber

+0

@Yalamber Я попробовал вышеуказанный код, спасибо за это. И я также заменил ['name', lat, long, serial_no] только с форматом [lat, long] и stiil, что карта не отображается. –

Смежные вопросы