Question

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

我想补充一下循环内容的能力。换句话说，我想循环遍历一个值，在本例中为Props，具有多个部分，在本例中为coords和contents。

以下代码是我最近的尝试。我无法让它发挥作用。知道我可能会出错吗？

谢谢！

 <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语法不正确。

当您的代码段最终评估时，它变为：

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

Laravel 5.4刀片Javascript谷歌地图 - 插入带有多个变量的@foreach

1 个答案: