Google-Maps-for-Rails - 如何使用gmap4rails設置地圖圖片的大小？

問候。Google-Maps-for-Rails - 如何使用gmap4rails設置地圖圖片的大小？

我在部署到Heroku時遇到Cartographer插件有問題。我試過Google-Maps-for-Rails（gmaps4rails gem），它看起來非常有前途。但我一直無法弄清楚如何設置地圖圖像大小。

與製圖師，我可以使用標記設置地圖圖像大小如下。

<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>

即繪製地圖，但不設置圖像大小。什麼是明智的方法？

謝謝。

來源

2011-05-04 user737981

您可以通過CSS設置：

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

見寶玉筆者的答案在這裏：Gmaps4rails : Setting map width and height

來源

2011-05-04 13:42:47

This Works。但我在三個不同的頁面上有三張地圖。所有不同的尺寸。設置這個CSS使得它們都是相同的大小。 – user737981 2011-05-05 00:40:19

讓我們更加精確。

在gmaps4rails中，加載了一個css文件，其中包含地圖容器的屬性和地圖本身。默認在這裏看到：

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

所以，你有兩個選擇：

基本：重寫這個CSS（工作正常）
一個更好的選擇是重新定義css你想要的方式+取消加載默認的css文件。您可以通過將false作爲gmaps或gmaps4rails視圖幫助程序的第二個參數來實現。看到這裏：https://github.com/apneadiving/Google-Maps-for-Rails/wiki/Miscellaneous

來源

2011-05-04 22:02:23 apneadiving

這確實有用，但我的實現可能有點尷尬。

<%= stylesheet_link_tag 'gmaps4rails_search' %> <%= gmaps4rails(@events_map, false, true) %>

– user737981 2011-05-05 01:18:11

我跟隨apneadiving的方法，雖然我的實現可能有點尷尬，即天真。

在我看來，我有以下標記。

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

我打開我自己的gmaps4rails_welcome.css，並避免通過傳遞「假」作爲第二個參數加載默認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-05 01:28:17 user737981

這有點尷尬:)你可能只有一個樣式表，因爲你可以在map_options哈希中設置容器div的id和map的div的id。請參閱https://github.com/apneadiving/Google-Maps-for-Rails/wiki/Map – apneadiving 2011-05-05 06:09:42

我有同樣的問題，並以不同的方式解決它。我從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; 
}

來源

2012-06-11 18:15:28

Google-Maps-for-Rails - 如何使用gmap4rails設置地圖圖片的大小？

回答

相關問題