Laravel 5.4 Blade Javascript Google Maps - 插入带有多个变量的@foreach

Question

我正在关注这个post，它精彩地展示了如何在 Javascript 中使用刀片模板循环遍历地图标记。

我还想添加循环浏览内容的功能。换句话说，我想遍历一个值，在本例中为 Props，其中包含多个部分，在本例中为坐标和内容。

下面的代码是我最近的尝试。我无法让它工作。知道我哪里可能出错了吗？

谢谢！

 <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 38.7222524, lng: -9.139336599999979},
          zoom: 12
        });

        var props = [
          @foreach ($rooms as $room)
              coords = [  "{{ $room->lat }}", "{{ $room->lng }}" ],
              contents = [ "{{ $room->title }}" ],
          @endforeach
          ];
          for (i = 0; i < props.length; i++) {
              var prop = new google.maps.LatLng(props[i][0], props[i][1]);

              var marker = new google.maps.Marker({
                  position: props.coords,
                  map: map,
              });

              var infoWindow = new google.maps.InfoWindow({
                content: props.content,
              });
          }


        marker.addListener('click', function(){
          infoWindow.open(map, marker);
        });


      var transitLayer = new google.maps.TransitLayer();
        transitLayer.setMap(map);
      };
    </script>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_GOOGLE_MAPS_KEY&callback=initMap"
    async defer></script>

Answer 1

这比 Laravel 更多的 javascript，但话虽如此，你的 javascript 语法不正确。

当你的 sn-p 最终评估它时，它变成：

var props = [
  coords = [ ..., ...],
  contents = [ ... ],
  coords = [ ..., ...],
  contents = [ ... ],
  ... // continues @foreach ($room)
];

这是不正确的 Javascript 语法。请在加载页面后检查源代码，看看它实际上是什么，以及你可以做些什么来修复语法。你真正想要的是最终得到一个像这样的对象数组：

var props = [ { lat: '...', long: '...', title: '...' }, { lat: '...', long: '...', title: '...'}, ... ];

要得到这个，你会这样做：

var props = [
  @foreach ($rooms as $room)
  { lat: "{{ $room->lat }}", lng: "{{ $room->lng }}", title: "{{ $room->title }}" },
  @endforeach
];

然后您需要像这样遍历数组...

for (i = 0; i < props; i++) {
var prop = new google.maps.LatLng(props[i].lat, props[i].lng);
var title = props[i].title;
...