javascript - 使用 JavaScript 在 Rails 应用程序的一个 View 中渲染一系列 Google map

Question

我正在使用 Ruby on Rails 构建一个公交车跟踪应用程序。它接受用户的当前位置，并使用从亚特兰大 MARTA 交通系统的 API 收集的公交车信息显示最近的公交车。

我使用 JavaScript 文件为最近公交车的简短列表中的每辆公交车渲染单独的 map ，并使用一个标记显示用户的当前位置，并使用另一个标记显示公交车的位置。

我最初使用嵌入在一对 <script></script> 中的 JavaScript 对 View 进行编码。标签，并且一切都按设计工作。此后，我将 JavaScript 移至 Assets 管道中其自己的文件中，并从 View 中发送相关变量。现在我的 View 仅渲染列表中的最终 map ，其余 map Canvas 渲染为空框。

我是一个相当新的 Stack Overflow 用户，我有点担心我的问题不够具体，但我很困惑，不知道下一步该去哪里。我感觉有些东西我不太明白 Rails 如何处理我的 JavaScript 文件和我从 View 发送的变量，但我在互联网上搜索了一些，但还没有找到任何相关文章。我欢迎有关调试技​​术或引用外部资源的建议，而不是只是为我修复代码。

也就是说，这是我的 application.js.erb 中的一行渲染 map 的文件:

var map = new google.maps.Map(document.getElementById('map_canvas_' + busNum), mapOptions);

您可以查看完整的application.js.erb文件在这里:

$(document).ready(function() {
  function initialize() {
    var currentLatLng = new google.maps.LatLng(currentLat, currentLng);
    var busLatLng = new google.maps.LatLng(busLat, busLng);

    var mapOptions = {
      center: currentLatLng,
      zoom: 14,
      scrollwheel: false
    };

    var map = new google.maps.Map(document.getElementById('map_canvas_' + busNum), mapOptions);

    var userMarker = new google.maps.Marker({
      position: currentLatLng,
      map: map,
      title: 'User',
      animation: google.maps.Animation.DROP
    });

    var imgSize = 30;

    var busIcon = {
      url: "<%= asset_path 'bus-marker.png' %>",
      scaledSize: new google.maps.Size(imgSize, imgSize * 1.5),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(imgSize * 1.5 / 2, imgSize)
    };

    var busMarker = new google.maps.Marker({
      position: busLatLng,
      map: map,
      title: 'Bus',
      icon: busIcon,
      animation: google.maps.Animation.BOUNCE
    });

    var current = 'You are here.';

    var userInfo = new google.maps.InfoWindow({
      content: current
    });

    var route = 'Bus number' + count + 'is on Route ' + busRoute + '. The next stop is at ' + busStop + '.';

    var busInfo = new google.maps.InfoWindow({
      content: route
    });

    google.maps.event.addListener(userMarker, 'click', function() {
      userInfo.open(map, userMarker);
    });

    google.maps.event.addListener(busMarker, 'click', function() {
      busInfo.open(map, busMarker);
    });
  };

  google.maps.event.addDomListener(window, 'load', initialize);
});

这是我想要渲染该 map 的 View 中的行:

<div class="well center-block bus-map" id="map_canvas_<%= bus["VEHICLE"] %>"></div>

这里是迭代关闭总线列表中每个项目的循环:

<% @proximate_buses.each_with_index do |bus, index| %>
    <div class="col-md-6">
        <div class="panel">
            <div class="panel-header text-center">
                <h3>Route: <%= bus["ROUTE"] %></h3>
                <h3>Bus No: <%= bus["VEHICLE"] %></h3>
                <h3>Next Stop: <%= bus["TIMEPOINT"] %></h3>
            </div>
            <div class="panel-body">
                <%= javascript_tag do %>
                  var currentLat = '<%= j @location.latitude.to_s %>';
                  var currentLng = '<%= j @location.longitude.to_s %>';
                  var busLat = '<%= j bus["LATITUDE"].to_s %>';
                  var busLng = '<%= j bus["LONGITUDE"].to_s %>';
                  var busNum = '<%= j bus["VEHICLE"].to_s %>';
                  var busRoute = '<%= j bus["ROUTE"].to_s %>';
                  var busStop = '<%= j bus["TIMEPOINT"].to_s %>';
                  var count = '<%= j (index + 1).to_s %>';
                <% end %>

                <div class="well center-block bus-map" id="map_canvas_<%= bus["VEHICLE"] %>"></div>
            </div>
        </div>
    </div>
<% end %>

感谢任何帮助。

Answer 1

问题是 application.js.erb 中的 busNum，它只有一个(最后一个)。您必须循环并创建所有可用的busNum(和相关 map )。