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

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

我使用一个javascript文件在最近的总线的短列表中为每个总线呈现一个单独的映射，并用一个标记显示用户的当前位置，用另一个标记显示总线的位置

我最初使用嵌入在一对

标记中的JavaScript对视图进行编码，并使所有内容都按设计工作。此后，我将JavaScript移动到资产管道中它自己的文件中，并从视图发送相关变量。现在，我的视图仅渲染列表中的最终贴图，其余贴图画布渲染为空框

我是一个新的Stack Overflow用户，我有点担心我的问题不够具体，但我被卡住了，不知道下一步该怎么办。我感觉Rails如何处理我的JavaScript文件以及我从视图中发送的变量有些我不太了解的地方，但是我在互联网上搜索了一些，还没有找到任何相关的文章。我欢迎关于调试技术的建议或对外部资源的引用，而不是仅仅为我修改代码

也就是说，下面是我的

application.js.erb

文件中呈现地图的一行：

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

您可以在此处查看完整的

application.js.erb

文件：

$（文档）.ready（函数（）{
函数初始化（）{
var currentLatLng=新的google.maps.LatLng（currentLat，currentLng）；
var busLatLng=新的google.maps.LatLng（busLat，busLng）；
变量映射选项={
中心:currentLatLng,，
缩放：14，
滚轮：错误
};
var map=new google.maps.map（document.getElementById（'map\u canvas\u'+busNum），mapOptions）；
var userMarker=new google.maps.Marker({
职位：currentLatLng，
地图：地图，
标题：“用户”，
动画：google.maps.animation.DROP
});
var imgSize=30；
var busIcon={
url:“”，
scaledSize：新的google.maps.Size（imgSize，imgSize*1.5），
来源：新google.maps.Point（0,0），
主播：新google.maps.Point（imgSize*1.5/2，imgSize）
};
var busMarker=new google.maps.Marker({
职位：busLatLng，
地图：地图，
标题:"巴士",，
图标：busIcon，
动画：google.maps.animation.BOUNCE
});
var current='你在这里'；
var userInfo=new google.maps.InfoWindow({
内容：当前
});
var route='公交号'+count+'在路线'+busRoute+'上。下一站在'+busStop+'上；
var busInfo=new google.maps.InfoWindow({
内容：路线
});
google.maps.event.addListener（userMarker，'click'，function（）{
打开（地图，用户标记）；
});
google.maps.event.addListener（busMarker，'click'，function（）{
busInfo.open（地图、巴士标记）；
});
};
google.maps.event.addDomListener（窗口“加载”，初始化）；
});

问题是application.js.erb中的

busNum

，它只是一个（最后一个）。

---

您必须循环并创建所有可用的busNum（和相对映射）。

问题在于application.js.erb中的

busNum

，它是唯一的一个（最后一个）。

---

您必须循环并创建所有可用的busNum（和相对映射）。

@Andrea，您正确地认为，

busNum

只获取一个值，这是一个问题

通过一些工具，我已经找到了如何对其进行编码，以便在

@display\u bus

中为每个总线运行javascript，这是

@proximate\u bus

的前八个元素的子集。我还对视图进行了一些清理，以便业务都发生在一个单独的

locations.js.erb

文件中

以下是新的观点：

最近的公共汽车
…实际上，它们离我们很远！考虑另一种交通方式。
安德里亚，
busNum
只获取一个值是正确的，这是一个问题

通过一些工具，我已经找到了如何对其进行编码，以便在
@display\u bus
中为每个总线运行javascript，这是
@proximate\u bus
的前八个元素的子集。我还对视图进行了一些清理，以便业务都发生在一个单独的
locations.js.erb
文件中

以下是新的观点：




最近的公共汽车
…实际上，它们离我们很远！考虑另一种交通方式。