ruby-on-rails - 在循环中包含 Google 地图以显示多张地图

Question

我有一个 Rails 5 应用程序，我想在一个循环中显示几个 Google Maps 地图。对于表中的每一行，都必须出现相同的地图。但是，地图只绘制一次：

这是视图：

thead
  tr
    th Map
    th Title
    th Distance
    th Duration
    th Sport
tbody
  - @feed.each do |item|
    tr
      td.col-md-3
        #stravaMap
      td.col-md-2
        = Date.parse(item['start_date'])
      td.col-md-2
        = item['name']
      td.col-md-1
        = item['distance'] / 1000
      td.col-md-1
        = item['type']

这是JS：

javascript:
  function initMap() {

  var map = new google.maps.Map(document.getElementById('stravaMap'), {
      center: {
          lat: 47.20604,
          lng: 7.53621
      },
      zoom: 16,
      disableDefaultUI: true
  });

  var encoded_data = 'k|b_Hc|~l@UI';

  var decode = google.maps.geometry.encoding.decodePath(encoded_data);

  var line = new google.maps.Polyline({
      path: decode,
      strokeColor: '#00008B',
      strokeOpacity: 1.0,
      strokeWeight: 4,
      zIndex: 3
  });

  line.setMap(map);
}

initMap();

我的理解是，每次我循环时都会绘制一张新地图，但它会绘制一次，然后在第一次循环后不会出现。

问题：如何确保每一行都包含 Google Maps 地图，而不仅仅是第一行？谢谢。

标签： ruby-on-railsrubygoogle-mapsloops

Answer 1

正如 Gabe 上面提到的，这部分代码:document.getElementById('stravaMap')只会抓取 DOM 中具有 id 的第一个元素stravaMap。如果您想获取 DOM 中要显示地图的所有元素，那么我建议使用querySelectorAll。这将为您提供本质上是具有特定类的所有元素的数组。然后，您可以遍历该元素数组，为每个元素（td.map在您的情况下为每个元素）初始化一个新的 Map 。我在这里快速浏览了一下：

function initMap() {
  mapElements = document.querySelectorAll('.map')

  mapElements.forEach((element) => {
    var map = new google.maps.Map(element, {
      center: {
          lat: 47.20604,
          lng: 7.53621
      },
      zoom: 16,
      disableDefaultUI: true
    });

    var encoded_data = 'k|b_Hc|~l@UI';

    var decode = google.maps.geometry.encoding.decodePath(encoded_data);

    var line = new google.maps.Polyline({
      path: decode,
      strokeColor: '#00008B',
      strokeOpacity: 1.0,
      strokeWeight: 4,
      zIndex: 3
    });

    line.setMap(map);
  }  
})

initMap();