1

更新：我已经找到了解决这个问题的方法 - 请参阅本文末尾的评论。

原始帖子： 我无法在 Ruby on Rails 3 的视图页面中显示 Google 地图（API 3）。我正在尝试直接执行此操作，而不是使用 GM4R gem，因此 Stack 上的大多数回复我见过的溢出不适用于我的情况。我已经成功地在静态页面上创建了地图，但不是在模型的视图页面上。我的代码组织如下：

application.js（在应用程序/资产/javascripts 中）：

...
//= require jquery
//= require jquery_ujs
//= require_tree .

googlemaps.js（应用程序/资产/javascripts 的顶级）：

var map, marker, current_pos, initial_pos = new google.maps.LatLng(49.2649, -123.2351);

function updatePositionDisplay( latlng ) // updates the readout under the map with the supplied position
    {
       document.getElementById('event_latitude').value  = latlng.lat();
       document.getElementById('event_longitude').value = latlng.lng();
    }

function initializemap()
  {
    var mapOptions = { zoom: 14, center: initial_pos, mapTypeId: google.maps.MapTypeId.ROADMAP };
    if (document.getElementById('event_map'))
    { alert( 'There is a map')}
      else {alert('There is no map')}
    map = new google.maps.Map(document.getElementById('event_map'), mapOptions);
    if (map != null) {alert('Map object has been created')}

    updatePositionDisplay( initial_pos );
  }

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

事件/new.html.erb：

<h1>Create New Event:</h1>

<!-- Display map-->
<div id="event_map" style="width: 80%; height: 60%;"></div>

<%= render 'form' %>

<%= link_to 'Back', events_path %>

events/_form.html.erb（标准 - 由脚手架生成）：

<%= form_for(@event) do |f| %>
  <% if @event.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@event.errors.count, "error") %> prohibited this event from being saved:</h2>

      <ul>
      <% @event.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :name %><br />
    <%= f.text_field :name %>
  </div>
  <div class="field">
    <%= f.label :user_id %><br />
    <%= f.number_field :user_id %>
  </div>
  <div class="field">
    <%= f.label :latitude %><br />
    <%= f.text_field :latitude %>
  </div>
  <div class="field">
    <%= f.label :longitude %><br />
    <%= f.text_field :longitude %>
  </div>
  <div class="field">
    <%= f.label :startdatetime %><br />
    <%= f.datetime_select :startdatetime %>
  </div>
  <div class="field">
    <%= f.label :enddatetime %><br />
    <%= f.datetime_select :enddatetime %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

行为和问题总结：

当我调用 events/new 时，我希望会发生的是我会看到一张地图，然后是一张表格。我已经验证（通过插入 alert() 调用）initializemap 函数被调用并且地图对象不为空（即，它被创建）。此外，表单中的纬度和经度框被正确填写，表明 updatePositionDisplay 代码被正确调用。但是，没有地图出现。

我对此感到非常困惑，因为我通过编写一个可以正确渲染地图的静态页面控制器来启动这个项目。

页面上呈现的代码如下所示：

<!DOCTYPE html>
<html>
<head>
  <title>MapApp Prototype</title>
  <!--For alternatives to loading external scripts on all pages, visit: http://railsapps.github.com/rails-javascript-include-external.html-->
  <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
  <link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/checkins.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/events.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/static_pages.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/users.css?body=1" media="all" rel="stylesheet" type="text/css" />
  <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/checkins.js?body=1" type="text/javascript"></script>
<script src="/assets/events.js?body=1" type="text/javascript"></script>
<script src="/assets/googlemaps.js?body=1" type="text/javascript"></script>
<script src="/assets/static_pages.js?body=1" type="text/javascript"></script>
<script src="/assets/users.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
  <meta content="authenticity_token" name="csrf-param" />
<meta content="SRh+VoCjXu3+LGmiH91+AByrXyNGEzv0nTXuZKbzfS8=" name="csrf-token" />
</head>
<body>

<h1>Create New Event:</h1>

<!-- Display map-->
<div id="event_map" style="width: 80%; height: 60%;"></div>

<form accept-charset="UTF-8" action="/events" class="new_event" id="new_event" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="SRh+VoCjXu3+LGmiH91+AByrXyNGEzv0nTXuZKbzfS8=" /></div>

... (details of form omitted)

</div>
  <div class="actions">
    <input name="commit" type="submit" value="Create Event" />
  </div>
</form>

<a href="/events">Back</a>

</body>
</html>

这一切对我来说都是正确的。任何关于我做错了什么或静态页面和模型链接视图页面之间有什么不同的见解或建议都将受到欢迎。

更新： 所以看来 event_map div 必须有一个明确的样式。我将以下代码添加到 app/assets/stylesheets/events.css.scss：

#event_map { height: 300px; }

这使它起作用。但是，有趣的是，我似乎无法将其更改为百分比符号。如果我做到 {height: 50%}，我又会得到一张空白地图。任何想法为什么会这样？我更喜欢生成一个灵活的布局，分配给地图的空间会自动调整为用户的浏览器窗口大小。

4

0 回答 0