Ruby on Rails如何将数据从控制器传递到html中的javascript

Question

我正在用 ruby​​ on rails 做谷歌地图。我正在尝试在地图上实现动态标记文本。

我找到了一种在 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>

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

我尝试添加文本：“”我把它放在 var homelatlng 下，但没有用。

我也试过了

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

我把它放在一个单独的javascript标签中

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

也不行。

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

Answer 1

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

您无法访问资产中的 ruby​​ 变量。你最好的选择是使用html5 data attributes 从你的控制器传递数据，或者我应该说视图到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
});

Answer 2

使用 gon gem。

第 1 步： 在你的 gemfile 中添加 gem'gon'

第 2 步： 运行捆绑安装

第 3 步： 在视图的标题标签中添加

第 4 步： 在控制器中添加 gon.yourpassdata="sometext"

第 5 步：从视图中获取数据，例如 alert(gon.yourpassdata)

完成！

Answer 3

更清晰的方式显示地图 + 地图上的动态标记 + 动态信息窗口 + 可点击的信息窗口...。只需传递所需的对象并包含来自谷歌地图的地点 js...此代码是准备好工作了。在这里，我使用$.each 使用 infowindows 向地图动态添加标记并将其推送到数组中

我提出了类似的问题here

在您的控制器中...

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

_show_nearby_locations_to_guest.js.erb

在这个 js.erb 中（使用带有动态标记的新地图更新视图，记住你在你点击的页面上有这个选择器（任何其他）），这里我有一个 EMPTY 地图并将其替换为 NEW 地图 FILLED 与动态标记

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

_show_nearby_locations_to_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);