получить данные из nodejs в веб-интерфейс js для карт Google, но застрял в поиске их и ищу способы их решения - PullRequest
Новая
       7

получить данные из nodejs в веб-интерфейс js для карт Google, но застрял в поиске их и ищу способы их решения

0 голосов
/ 26 ноября 2018

My NodeJS GET route: 

router.get('/stores', function (req, res, next) {
errorMsg = req.flash('error')[0];
successMsg = req.flash('success')[0];

Product.find(function (err, products) {
    // console.log(products)
    res.render('admin/stores', {
        layout: 'admin-map.hbs',
        stores: products,
        errorMsg: errorMsg,
        GOOGLE_APIKEY: process.env.GOOGLE_APIKEY,
        noErrors: 1
    });
});

Маршрут /stores возвращает данные json, которые содержат широта и долгота , и я хочу, чтобы в моемСкрипт тега map.html с циклом, для рендеринга выводов на карте.Ниже скрипт: 

<!DOCTYPE html>
<html>

   <head>
   <script src = "https://maps.googleapis.com/maps/api/js"></script>

   <script>
     function loadMap() {
        alert(this.stores);
        var mapOptions = {
           center:new google.maps.LatLng(17.433053, 78.412172),
           zoom:5
        }

        var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

        var marker = new google.maps.Marker({
           position: new google.maps.LatLng(17.433053, 78.412172),
           map: map,
           draggable:true,
           icon:'/scripts/img/logo-footer.png'
        });

        marker.setMap(map);

        var infowindow = new google.maps.InfoWindow({ });

        infowindow.open(map,marker);
     }
    </script>
    <!-- ... -->
    </head>
</html>

Как мне это сделать?

Ответы [ 2 ]

0 голосов
/ 28 ноября 2018

ответ находится внутри внешнего сценария, я могу иметь объект, объявленный глобально, и эти двойные цветочные скобки прекрасно с ними работают 

 <script>
     function loadMap() {
        alert(this.stores);
        var mapOptions = {
           center:new google.maps.LatLng(17.433053, 78.412172),
           zoom:5
        }

        var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
      {{#each stores}}
        var marker = new google.maps.Marker({
           position: new google.maps.LatLng(17.433053, 78.412172),
           map: map,
           draggable:true,
           icon:'/scripts/img/logo-footer.png'
        });
{{/each}}

        marker.setMap(map);

        var infowindow = new google.maps.InfoWindow({ });

        infowindow.open(map,marker);
     }
    </script>
0 голосов
/ 27 ноября 2018

Кажется, вам нужно выполнить два шага

1.Передача данных из hbs в скрипт

Использование синтаксиса в тройных скобках 

<script>
  let stores = {{{ stores }}}; // the triple brackets
  console.log('Data : ', stores);

  function loadMap() {
    ...

Проверить, печатаются ли данные в консоли?Если да, ваши данные доступны во внешнем скрипте, и вы можете

2.Цикл по нему 

    ...
    for (let i = 0; i < stores.length; i++) {
      // the JS loop instead of hbs one, because we are on front-end

      var marker = new google.maps.Marker({
         position: new google.maps.LatLng(stores[i].lat, stores[i].lng), // whatever applies
         map: map,
         draggable:true,
         icon:'/scripts/img/logo-footer.png'
      });
    }

И вам не нужно звонить setMap(), вы уже установили карту на map: map выше

...