Question

我对json数据有一个迭代问题。我将数组发送到javascript。要使用它，请将其转换为json数据，然后将其传递给javascript var。

<script>
  var estates = <?php echo json_encode($estates);?>;

  function initMap(){
    var options =
        {
            zoom : 6,
            center : {lat:34.652500, lng:135.506302}
        };

    var map = new google.maps.Map(document.getElementById('map'), options);
    @foreach ($estates as $est)
    var marker = new google.maps.Marker({
              map: map,
              icon: 'imgs/marker.png',
              url: "/pages/{{$est->id}}",
              label: {
                  text: estates.data[0].price,
                  color: "#fff",
              },
              position: {
                  lat: {{$est->lat}},
                  lng: {{$est->lng}}
              }
          });

     google.maps.event.addListener(marker, 'click', function () {
       window.location.href = this.url;
     });
  @endforeach
  }
</script>

但是在这一行estates.data[0].price,上，我的标签不断重复相同的价格。这是因为我给[0]。但是，如果我不提供数字，则它不会进入data并且找不到price。无论如何有迭代json。因为现在它像this

一遍又一遍地给了我相同的价格

通过我已经尝试过以下迭代的方式。但这一次每个标记标签一次具有所有价格...

for(let i = 0; i < estates.data.length; i++){
        var marker = new google.maps.Marker({
          map: map,
          icon: 'imgs/marker.png',
          url: "/pages/{{$est->id}}",
          label: {
              text: estates.data[i].price,
              color: "#fff",
          },
          position: {
              lat: {{$est->lat}},
              lng: {{$est->lng}}
          }
      });
}

我也尝试过这个：

<?php
    $js_array = json_encode($estates);
    echo "var estates = ". $js_array . ";\n";
   ?>;

for(var i = 0; i < estates.data.length; i++){
  var needle = estates.data[i];
  for(var key in needle){
    var obj = needle.price;
    console.log(obj)
  }
}

for(var itr = 0; itr < obj.length; itr++){
    var marker = new google.maps.Marker({
      map: map,
      icon: 'imgs/marker.png',
      url: "/pages/{{$est->id}}",
      label: {
          text: obj[itr],
          color: "#fff",
      },
      position: {
          lat: {{$est->lat}},
          lng: {{$est->lng}}
      }
    });
}

但仍然无法正常运行。...

Answer 1

也许您只需要在其周围包装一个for循环即可。我无法测试它，因为我没有PHP代码。

@foreach ($estates as $est)
for(let i = 0; i < estates.data.length; i++){
        var marker = new google.maps.Marker({
          map: map,
          icon: 'imgs/marker.png',
          url: "/pages/{{$est->id}}",
          label: {
              text: estates.data[i]
              color: "#fff",
          },
          position: {
              lat: {{$est->lat}},
              lng: {{$est->lng}}
          }
      });
}

 google.maps.event.addListener(marker, 'click', function () {
   window.location.href = this.url;
 });

编辑：或者您可以尝试编辑此行text: {{$est->data}}

编辑²：仅删除php内容，仅在javascript中运行？我删除了php foreach循环，只是尝试使用javascript对象。

<script>
  var estates = <?php echo json_encode($estates);?>;

  function initMap(){
    var options =
        {
            zoom : 6,
            center : {lat:34.652500, lng:135.506302}
        };

    var map = new google.maps.Map(document.getElementById('map'), options);
    for(let i = 0; i < estates.length; i++){
    var marker = new google.maps.Marker({
              map: map,
              icon: 'imgs/marker.png',
              url: "/pages/"+estates[i].id,
              label: {
                  text: estates.data[0].price,
                  color: "#fff",
              },
              position: {
                  lat: estates[i].lat,
                  lng: estates[i].lng
              }
          });
     google.maps.event.addListener(marker, 'click', function () {
       window.location.href = this.url;
     });
    }
  }
</script>

我希望对您有帮助

Answer 2

轻触即可解决问题。

var marker = new google.maps.Marker({
      map: map,
      icon: 'imgs/marker.png',
      url: "/pages/{{$est->id}}",
      label: {
          text: "{{$est->price}}",
          color: "#fff",
      },
      position: {
          lat: {{$est->lat}},
          lng: {{$est->lng}}
      }
});

Price是varchar，所以在“ {{$ est-> price}}”中使用了此循环，现在还需要json.encode ...

迭代json数据中的问题，一遍又一遍地迭代相同的数据

2 个答案: