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

したがって、次の 2 つの選択肢があります。

  1. 基本: この css をオーバーライドします (問題なく動作します)

  2. より良い代替手段は、必要に応じて css を再定義し、デフォルトの css ファイルの読み込みをキャンセルすることです。orビュー ヘルパーfalseの 2 番目の引数として渡すことで、これを実現できます。ここを参照してください: https://github.com/apneadiving/Google-Maps-for-Rails/wiki/Miscellaneousgmapsgmaps4rails

于 2011-05-04T22:02:23.643 に答える
1

あなたはcssを介してそれを設定することができます：

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

ここで宝石の作者の答えを参照してください：Gmaps4rails：マップの幅と高さの設定

于 2011-05-04T13:42:47.197 に答える
0

私は同じ問題を抱えていて、別の方法で解決しました。gmaps4rails.css から幅をコメントアウトし、幅設定を持つ div で Google マップをラップしました。これにより、レスポンシブ アプローチやグリッド システムなどを使用する場合などに、マップのサイズを変更できます。これを 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 に答える
0

私の実装は少しぎこちなく、つまりナイーブかもしれませんが、私はアプネダイビングのアプローチに従っています。

私の見解では、次のマークアップがあります。

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

独自の gmaps4rails_welcome.css をロードし、2 番目の引数として「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 に答える