Google-Maps-for-Rails - 如何使用 gmap4rails 设置地图图像的大小？

Question

问候。

我在部署到 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>

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

谢谢。

Answer 1

让我们更准确地说。

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

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

所以你有两个选择：

1. 基本：覆盖这个 css（效果很好）< /p>

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

Answer 2

您可以通过 css 设置它：

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

请参阅 gem 作者的答案： Gmaps4rails : 设置地图宽度和高度

Answer 3

我正在遵循 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;

对于每个地图

渲染，我都有一个特定的样式表。这有效。

谢谢！

Answer 4

我有同样的问题并以不同的方式解决。我注释掉了 gmaps4rails.css 中的宽度，并将 Google 地图包装在具有宽度设置的 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;
}