RubyonRails如何在html中将数据从控制器传递到javascript

我在RubyonRails上做谷歌地图。我试图在地图上实现动态标记文本

我找到了一种在java脚本中添加标记文本的方法。如何将控制器数据（从数据库检索的字符串数据）传递到java？我已经搜索了其他帖子，但无法理解它们的答案

html中的javascript是

 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
 <script type="text/javascript" src="../src/markerwithlabel.js"></script>
 <script type="text/javascript">
 function initMap() {

 var latLng = new google.maps.LatLng(49.47805, -123.84716);
 var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);

 var map = new google.maps.Map(document.getElementById('map_canvas'), {
   zoom: 12,
   center: latLng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
 });

 var marker1 = new MarkerWithLabel({
   position: homeLatLng,
   draggable: true,
   raiseOnDrag: true,
   map: map,
   labelContent: *"text"*,
   labelAnchor: new google.maps.Point(22, 0),
   labelClass: "labels", // the CSS class for the label
   labelStyle: {opacity: 0.75}
 });
 </script>

函数initMap（）{
var latLng=新的google.maps.latLng（49.47805，-123.84716）；
var homeLatLng=新的google.maps.LatLng（49.47805，-123.84716）；
var map=new google.maps.map（document.getElementById（'map_canvas'）{
缩放：12，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var marker1=新的MarkerWithLabel({
职位：homeLatLng，
真的，
是的，
地图：地图，
标签内容：*“文本”*，
labelAnchor：新的google.maps.Point（22,0），
labelClass:“labels”，//标签的CSS类
标签样式：{不透明度：0.75}
});

我想将这个“text”替换为一个名为text的变量，它从我的控制器（比如gmaps_controller.rb）复制@somestring

我试着添加文本：“我把它放在var homelatlng下，但不起作用

我也试过

$(document).ready(function(){
var text='<%=j @somestring%>'
})

$（文档）.ready（函数（）{
变量文本=“”
})

之后，我将其放入一个单独的javascript标记中

<script type="text/javascript" src="../src/markerwithlabel.js"></script>

也不起作用

有没有其他方法可以将数据传递给控制器？请详细告诉我，我是个新手。 提前谢谢

如何在html中将数据从控制器传递到javascript

您无法访问资产中的ruby变量。您最好使用从控制器传递数据，或者我应该说查看javascript。假设您有如下html元素：

= link_to "some text", some_path, id: "some_id", data: {value: @some_value}  #where @some_value is set in your controller

然后在javascript中像这样访问它

$(document).ready(function(){
  var text =  $("#some_id").data("value");
  // now text will contain some_value
});

---

更清晰地显示地图+地图上的动态标记+动态信息窗口+可点击的信息窗口…。只需传递所需对象并包含来自google map的places js…此代码已准备就绪。在这里，我使用

$使用信息窗口向地图动态添加标记。每个
，然后将其推入数组中

我提出了类似的问题

在控制器中…

def show_nearby_locations_to_guest
@nearbys = Place.near("#{params[:address]}", 5,:order => "distance",:units => :km).paginate(:page => params[:page], :per_page => 10)
end

\u向guest.js.erb展示附近的位置

<%= javascript_tag do%>
/////use global variable instead of using data-attribute as my resultset can have 100+ records
window.nearbys= <%=raw @nearbys.to_json %>;
<%end%>


<script type="text/javascript">
var pinColor = "000000";
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
function initialize() {
// Display a map on the page
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
map.setTilt(45);
//emtpy array to add dynamic markers
var markers=[];
//emtpy array to add dynamic infowindows 
var infoWindowContent=[];
$.each(nearbys, function(index) {
markers.push([nearbys[index]['title'], nearbys[index]['latitude'],nearbys[index]['longitude']]);
infoWindowContent.push(['<div class="info_content" >' +
'<h3'+nearbys[index]['title']+'</h3>' +
'<p><i>'+nearbys[index]['about']+'</i></p>' +
'<p><a href="/places/show/'+nearbys[index]['id']+'" data-remote="true" title="view more">view more</a></p>' +
'</div>']);
});
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow({ maxWidth: 320 }), marker, i;
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld="+markers[i][0].charAt(0).toUpperCase()+"|FE7569|" + pinColor,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0],
icon: pinImage
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(14);
google.maps.event.removeListener(boundsListener);
});
}//initialize ends
$(document).ready(function(){
$('#map-canvas').html("<p class='text-center text-alert'><b><i>Loading map...</i><i class='fa fa-spinner fa-spin fa-2x'></i></b></p>");
//load the map after 2 seconds so that the same code can work on modals as well
setTimeout('initialize()', 2000);

在这个js.erb中（要用动态标记的新地图更新视图，请记住您在点击的页面上有这个选择器（任何其他选择器），这里我有一个空的地图，并将其替换为新的地图用动态标记填充

$("#map-canvas").html("<%= escape_javascript(render(:partial => 'show_nearby_locations_to_guest')) %>");

$（“#地图画布”）.html（“'show_near_locations_to_guest'））%>”；

\u显示附近的位置\u至\u guest.html.erb

<%= javascript_tag do%>
/////use global variable instead of using data-attribute as my resultset can have 100+ records
window.nearbys= <%=raw @nearbys.to_json %>;
<%end%>


<script type="text/javascript">
var pinColor = "000000";
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
function initialize() {
// Display a map on the page
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
map.setTilt(45);
//emtpy array to add dynamic markers
var markers=[];
//emtpy array to add dynamic infowindows 
var infoWindowContent=[];
$.each(nearbys, function(index) {
markers.push([nearbys[index]['title'], nearbys[index]['latitude'],nearbys[index]['longitude']]);
infoWindowContent.push(['<div class="info_content" >' +
'<h3'+nearbys[index]['title']+'</h3>' +
'<p><i>'+nearbys[index]['about']+'</i></p>' +
'<p><a href="/places/show/'+nearbys[index]['id']+'" data-remote="true" title="view more">view more</a></p>' +
'</div>']);
});
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow({ maxWidth: 320 }), marker, i;
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld="+markers[i][0].charAt(0).toUpperCase()+"|FE7569|" + pinColor,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0],
icon: pinImage
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(14);
google.maps.event.removeListener(boundsListener);
});
}//initialize ends
$(document).ready(function(){
$('#map-canvas').html("<p class='text-center text-alert'><b><i>Loading map...</i><i class='fa fa-spinner fa-spin fa-2x'></i></b></p>");
//load the map after 2 seconds so that the same code can work on modals as well
setTimeout('initialize()', 2000);


/////使用全局变量而不是使用数据属性，因为我的结果集可以有100多条记录
window.nearbys=；
var pinColor=“000000”；
var映射；
var bounds=new google.maps.LatLngBounds（）；
变量映射选项={
mapTypeId:“路线图”
};
函数初始化（）{
//在页面上显示地图
map=new google.maps.map（document.getElementById（“地图画布”），mapOptions）；
地图.设置倾斜（45）；
//emtpy数组以添加动态标记
var标记=[]；
//用于添加动态信息窗口的emtpy阵列
var infoWindowContent=[]；
$.each（近距离，函数（索引）{
markers.push（[nearbys[index]['title']，nearbys[index]['latitude']，nearbys[index]['longitude']）；
infoWindowContent.push（[''）+
“使用gon gem

步骤1：
在gem文件中添加gem'gon'

步骤2：
运行包安装

步骤3：
添加视图的标题标记

步骤4：
在控制器中添加gon.yourpassdata=“sometext”

第五步：从视图中获取数据，比如警报（gon.yourpassdata）

完成！
我在这里提供了一个例子：你能分享一下吗，这在视图中呈现了什么？@apreading我已经读了很多遍，试着跟随添加文本到标记。但是这个特殊的是咖啡脚本，我已经尝试了很多地方添加这个咖啡脚本（尝试了其他可以使用的javascript！），它只是不起作用。T必须转向其他方法。这个带标签的标记可以工作。@Babar当我尝试添加这2个标记时，地图显示但没有标记没有文本。似乎是因为文本值为空或语法错误出错。在github示例中，他在控制器中创建json并将其发送到视图，您尝试过吗？这是htm吗大多数浏览器都支持l5吗？@wen是的，他们支持。我已经测试了他们的ie9，这表明他们也适用于旧版本：）@wen您必须在某些元素上使用data属性，就像我在链接中使用的一样，然后在javascriptIs this窗口中访问它。nearbys=；从controller复制数据？这个窗口是什么？我觉得urs最有可能工作，但我会将它们复制到我的代码中，但不工作。@wen…window.variable..只是一种将全局值存储到页面的方法..就像您一样store in data attribute=您的_值…所以您将其存储在全局变量中，该变量可用于整个页面，然后像往常一样访问它…尝试一下…window.nearbys=；我应该将此代码放在哪里？我尝试了window.nearbys=“hi”和put alert（window.nearbys），它不显示消息，也不显示alert（nearbys）。这部分似乎不起作用？@wen总是记得在js中设置ruby代码…当你在html.erb文件中而不是在标签中时，在这种情况下，你需要在页面加载时准备好数据，并准备在标签中使用。我可以知道你的show_Nearly_locations_to_guest文件中的内容吗？我有问题：分开显示标记和映射T。我不认为只是将数据从ruby传递到javascript。我们需要一个gem…@user3736098