2

有一些主题试图在这里涵盖这一点：Gmaps4rails : map not shown when loading dynamic and 特别是在这里：Rendering google map using gmaps4rails through Ajax，还观看了 gmap 动态更新的截屏视频，但我似乎仍然没有得到这行得通。

仅当单击显示用户和报价之间方向的按钮时，我才尝试将地图加载到下拉选项卡中。在我的 _location.html.erb 部分中，我有：

<%= gmaps({ "direction" => { "data" => { "from" => current_user.location, "to" => @offer.location } } })%>

（地点是地址）

现在，当立即渲染局部时，这可以很好地工作。但是，如果我尝试在整个页面最初加载后稍后通过 AJAX 调用呈现部分，则不会显示 gmap。是否可以通过 AJAX 调用初始化和渲染 gmap 并显示方向？

4

1 回答 1

2

原因很简单：部分包含很多您无法以这种方式加载和执行的 javascript。

所以你不能在那里使用 RJS。

正确的做法是 UJS：通过 AJAX 调用获取数据并呈现结果。在下面的代码中，我使用了 jQuery。

在您看来，添加：

//include google script
<script type="text/javascript" src='http://maps.google.com/maps/api/js?sensor=false&libraries=geometry'></script>
//include gmaps4rails javascript
<%=javascript_include_tag 'gmaps4rails' %>

<script type="text/javascript" charset="utf-8">
//load map when button click (replace with what you want)
$('#ajax_map').click(function(){
  //you have to set a size to the div otherwise the map won't display, that's the purpose of these css classes
  $('#map_container').addClass('map_container');
  $('#gmaps4rails_map').addClass('gmaps4rails_map');
  //create the map object
  Gmaps4Rails.initialize();
  //of course, replace these two with your dynamic data, you'd have to use some $.ajax jQuery method.
  Gmaps4Rails.direction_conf.origin = 'toulon, france';
  Gmaps4Rails.direction_conf.destination = 'paris, france';
  //read the js file, you can customize much more: https://github.com/apneadiving/Google-Maps-for-Rails/blob/master/public/javascripts/gmaps4rails.js
  Gmaps4Rails.create_direction();
});
</script>

<div id="map_container"> 
  <div id="gmaps4rails_map"></div>
</div>

<button type="button" id="ajax_map">Ajax Map</button>

在您的 CSS 中添加以下类：

#map-container {
  width: 800px;
}

#gmaps4rails_map {
  width: 800px;
  height: 400px;
}
于 2011-06-17T13:10:53.283 回答