Laravel 5.4 Blade Javascript Google Maps-插入具有多个变量的@foreach [英] Laravel 5.4 Blade Javascript Google Maps - Insert @foreach with multiple variables

问题描述

我正在关注此帖子，其中精彩地展示了如何使用Javascript中的刀片模板在地图标记中循环.

I'm following this post which wonderfully shows how to loop through map markers using blade templating within Javascript.

我还想添加循环浏览内容的功能.换句话说，我想遍历一个值(在这种情况下为Props)，其中包含多个部分(在这种情况下为coords和content).

I'd like to add on the ability to loop through the content as well. In other words, I'd like to loop through one value, in this case, Props, with multiple parts, in this case, coords and contents.

以下代码是我的最新尝试.我无法正常工作.知道我哪里可能出问题了吗?

The code below is my latest attempt. I can't get it to work. Any idea where I may be going wrong?

谢谢！

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

推荐答案

这是比Laravel多得多的javascript，但是这样说来，您的javascript语法是错误的.

this is much more javascript than it is Laravel, but with that being said, your javascript syntax is incorrect.

您的代码段最终经过评估后，它变为:

When your snippet eventually evaluates it becomes:

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

这是不正确的Javascript语法.加载页面后，请检查源代码，看看它是什么，以及您可以采取哪些措施来修复语法.您真正想要的是最终得到一个像这样的对象数组:

which is incorrect Javascript syntax. Please check the source after loading the page and see what it actually is, and what you can do to fix the syntax. What you really want is to end up with an array of objects like so:

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

要获得此功能，您可以这样做:

To get this, you would do:

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

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

You would then need to iterate through the array like so...

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

这篇关于Laravel 5.4 Blade Javascript Google Maps-插入具有多个变量的@foreach的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！