0

问候。

在部署到 Heroku 时，我遇到了 Cartographer 插件的问题。我尝试了 Google-Maps-for-Rails (gmaps4rails gem)，它看起来很有希望。但我无法弄清楚如何设置地图图像大小。

使用 Cartographer，我可以使用如下标记设置地图图像大小。

<div id="map-right">
  <%= raw Cartographer::Header.new.to_s %>
  <%= raw @map.to_html %>
  <div id="map" style="width:658px;height:348px;">[Map]</div>
</div>

如何使用 gmaps4rails 获得类似的行为？我正在尝试这个。

<div id="map-right">
  <div id="map" style="width:658px;height:348px;"><%= gmaps4rails(@events_map) %></div>
</div>

绘制地图但不设置图像大小。什么是明智的做法？

谢谢。

4

4 回答 4

2

让我们更加精确。

在gmaps4rails中，加载了一个 css 文件，其中包含地图容器和地图本身的属性。默认值在此处可见：

https://github.com/apneadiving/Google-Maps-for-Rails/blob/master/public/stylesheets/gmaps4rails.css

所以你有两个选择：

  1. 基本：覆盖这个 css（工作正常）

  2. 更好的选择是以您想要的方式重新定义 css + 取消默认 css 文件的加载。您可以通过false作为gmapsorgmaps4rails视图助手的第二个参数传递来实现这一点。见这里：https ://github.com/apneadiving/Google-Maps-for-Rails/wiki/Miscellaneous

于 2011-05-04T22:02:23.643 回答
1

您可以通过 css 设置它：

#gmaps4rails_map {
  width: 658px;
  height: 348px;
}

在此处查看 gem 作者的答案：Gmaps4rails : Setting map width and height

于 2011-05-04T13:42:47.197 回答
0

我正在遵循 apneadiving 的方法，尽管我的实现可能有点尴尬，即天真。

在我看来，我有以下标记。

<div id="map" style="width:658px;height:347px">
   <%= stylesheet_link_tag 'gmaps4rails_welcome' %>
   <%= gmaps4rails(@models_map, false, true) %>
</div>

我加载了我自己的 gmaps4rails_welcome.css 并通过传递 'false' 作为第二个参数来避免加载默认的 gmas4rails css。

我的 gmaps4rails_welcome.css 文件包含以下代码。

#map-container {
  padding: 6px;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc #ccc #999 #ccc;
  -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
  -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
  box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
  width: 800px;
}

#gmaps4rails_map {
  width: 658px;
  height: 347px;

}

对于每个地图渲染，我都有一个特定的样式表。这行得通。

谢谢！

于 2011-05-05T01:28:17.497 回答
0

我有同样的问题并以不同的方式解决它。我从 gmaps4rails.css 中注释掉了宽度，并将谷歌地图包装在一个具有宽度设置的 div 中。通过这个，地图可以调整大小，例如，当使用响应式方法、网格系统等时。我将它与 Twitter Bootstrap 一起使用，它工作正常。请注意，到目前为止我固定了高度。希望有帮助。

#map-container {
  padding: 6px;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc #ccc #999 #ccc;
  -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
  -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
  box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
//  width: 800px;
}

#gmaps4rails_map {
//  width: 658px;
    height: 347px;
}
于 2012-06-11T18:15:28.780 回答