从 nodejs 获取数据到 google 地图的前端 js 但一直在检索它寻找解决它的方法

Question

我的 NodeJS GET 路线：

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

包含纬度和经度的路线/storesreturnsjson数据和我希望它在我的 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>

我该怎么做？

Answer 1

看来您需要执行两个步骤

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中设置了地图

Answer 2

答案在前面的脚本中我可以全局声明一个对象，这个双花括号可以很好地配合它们

 <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>

从 nodejs 获取数据到 google 地图的前端 js 但一直在检索它寻找解决它的方法

get data from nodejs to frontend js for google maps but stuck in retrieving it looking for ways to solve it

node.js

express-handlebars