Question

我正在Laravel开展一个项目。

这是我用Google地图显示带有多个标记的地图的脚本。我有2个json对象，我正在检索一个有位置和一个有汽车。一个位置可以有很多汽车，所以它是一对多的关系。

我要做的是在infowindow.setContent中显示位置的描述和属于该位置的汽车。地图，具有适当位置的标记将正确显示。但是在infowindow.setContent中会显示位置的描述和标题以及属于该位置的汽车的最后一条记录。

运行脚本时，console.log会显示必须的信息。这意味着我的autos循环工作正常，但是当我将结果传递给infowindow.setContent时，它只读取最后一条记录。

这是我第一次在这里寻求帮助，请原谅我，如果我不够清楚的话。我会非常感谢任何回应我的人。

我的剧本：

<script  type="text/javascript">  

    var locations = @json($locations);
    var autos = @json($autos);
    var infowindow = new google.maps.InfoWindow();


    var mymap = new GMaps({
        el: '#mymap',
        center: {lat: 41.323029, lng: 19.817856},
        zoom:6
    });



    $.each( locations, function( index, value ){

        mymap.addMarker({
            lat: value.lat,
            lng: value.long,
            title: value.title,
            click: function(e) {

                for (var auto in autos)
                {
                    if(autos[auto].location_id == value.id)
                    {

                        var autoBrands =autos[auto].brand;
                        console.log(autoBrands);

                    }
                }


                infowindow.setContent('<div><strong>' + autoBrands + '</strong><br></div>'+  '<div><strong>' + value.title + '</strong><br></div>' + '<div><strong>' + value.description + '</strong><br></div>');

                infowindow.open(mymap, this);

            }
        });

    });

</script>

Answer 1

看起来您只是在循环中重新分配autoBrands的值。为什么不将它创建为数组对象？像

这样的东西

<script  type="text/javascript">  

  var locations = @json($locations);
  var autos = @json($autos);
  var infowindow = new google.maps.InfoWindow();


  var mymap = new GMaps({
      el: '#mymap',
      center: {lat: 41.323029, lng: 19.817856},
      zoom:6
  });



  $.each( locations, function( index, value ){

      mymap.addMarker({
          lat: value.lat,
          lng: value.long,
          title: value.title,
          click: function(e) {

              var autoBrands = [];
              for (var auto in autos)
              {
                  if(autos[auto].location_id == value.id)
                  {

                      autoBrands.push(autos[auto].brand);
                      console.log(autoBrands);

                  }
              }


              infowindow.setContent('<div><strong>' + autoBrands.join(",") + '</strong><br></div>'+  '<div><strong>' + value.title + '</strong><br></div>' + '<div><strong>' + value.description + '</strong><br></div>');

              infowindow.open(mymap, this);

          }
      });

  });

希望这有帮助！

Answer 2

您循环遍历所有位置，为每个位置添加标记。但是，您只有一个infowindow变量。在循环的每次迭代中，您将更新相同信息窗口的内容，因此它最终只是从最后一次迭代中获取内容。

有一个单独的功能可以打开infowindow以响应用户的点击，如下所示：

$.each( locations, function( index, value ){
    mymap.addMarker({
        lat: value.lat,
        lng: value.long,
        title: value.title,
        click: function(e) {
            for (var auto in autos)
            {
                if(autos[auto].location_id == value.id)
                {
                    var autoBrands =autos[auto].brand;
                    console.log(autoBrands);
                }
            }

            openInfowindow(
                '<div><strong>' + autoBrands + '</strong><br></div>'+  '<div><strong>' + value.title + '</strong><br></div>' + '<div><strong>' + value.description + '</strong><br></div>',
                this
            );
        }
    });
});

function openInfowindow(content, marker)
{
    infowindow.setContent(content);
    infowindow.open(mymap, marker);
}

infowindow.setContent只显示一条记录

2 个答案: