使用 JavaScript 在 Rails 应用程序的一个视图中渲染一系列 Google 地图

问题在application.js.erb中busNum，它只有一个（最后一个）。您必须循环并创建所有可用的总线编号（以及相对映射）。

>@Andrea，你是对的，busNum只得到一个值，这是一个问题。

经过一些工具，我已经弄清楚了如何编码它，以便 javascript 在 @display_buses 中为每个总线运行，这是@proximate_buses前八个元素的子集。我还对视图进行了一些清理，以便业务全部发生在单独的locations.js.erb文件中。

下面是新视图：

<p id="notice">
  <%=n otice %>
</p>
<div class="row">
  <h2>The <%= NumbersInWords.in_words(@display_buses.length) %> closest buses</h2>
  <% if @display_buses.length==0 %>
    <h3>...are pretty far away, actually! Consider an alternative mode of transportation.</h3>
    <% end %>
      <div class="well center-block bus-map" id="map"></div>
</div>

这是JavaScript文件中发生的循环：

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require_tree .
$(document).ready(function() {
  var currentLat = gon.current_lat;
  var currentLng = gon.current_lng;
  var displayBuses = gon.display_buses;
  var currentLatLng = new google.maps.LatLng(currentLat, currentLng);
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: currentLatLng,
      zoom: 15,
      scrollwheel: false
    });
    setMarkers(map);
  }
  function setMarkers(map) {
    var userMarker = new google.maps.Marker({
      position: currentLatLng,
      map: map,
      title: 'User',
      animation: google.maps.Animation.DROP
    });
    var userInfo = new google.maps.InfoWindow({
      content: 'You are here.'
    });
    google.maps.event.addListener(userMarker, 'click', function() {
      userInfo.open(map, userMarker);
    });
    var imgHt = 30;
    var imgWd = imgHt * 1.5;
    var busIcon = {
      url: "<%= asset_path 'bus-marker.png' %>",
      scaledSize: new google.maps.Size(imgHt, imgWd),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(imgWd / 2, imgHt)
    };
    var infoWindow = new google.maps.InfoWindow;
    var busLatLng, busMarker, i;
    var busInfo = [];
    for (i = 0; i < displayBuses.length; i++) {
      var busLat = displayBuses[i].LATITUDE;
      var busLng = displayBuses[i].LONGITUDE;
      var busNum = displayBuses[i].VEHICLE;
      var busRoute = displayBuses[i].ROUTE;
      var busStop = displayBuses[i].TIMEPOINT;
      busLatLng = new google.maps.LatLng(busLat, busLng);
      busMarker = new google.maps.Marker({
        position: busLatLng,
        map: map,
        title: 'Bus number ' + busNum,
        icon: busIcon,
        animation: google.maps.Animation.BOUNCE
      });
      busInfo[i] = new google.maps.InfoWindow({
        content: 'Bus number ' + busNum + ' is on Route ' + busRoute + '. The next stop is at ' + busStop + '.'
      });
      google.maps.event.addListener(busMarker, 'click', (function(busMarker, busInfo) {
        return function() {
          infoWindow.setContent(busInfo.content);
          infoWindow.open(map, busMarker);
        }
      })(busMarker, busInfo[i]));
    }
  };
  google.maps.event.addDomListener(window, 'load', initMap);
});

我正在使用一个名为 gon 的 gem，它为 js 提供变量，而不是我之前繁琐的定义。这让我可以通过locations控制器发送@location属性和@display_buses - 非常流畅。