Google-Maps-for-Rails - Как мне установить размер изображения карты, используя gmap4rails? - PullRequest
Новая
       6

Google-Maps-for-Rails - Как мне установить размер изображения карты, используя gmap4rails?

0 голосов
/ 04 мая 2011

Привет.

У меня были проблемы с плагином Cartographer при развертывании в Heroku. Я попробовал 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 ]

2 голосов
/ 05 мая 2011

Давайте будем еще точнее.

В gmaps4rails загружается файл css, содержащий свойства контейнера карты и самой карты. По умолчанию видны здесь:

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

Итак, у вас есть два варианта:

  1. basic: переопределить этот css (который отлично работает)

  2. Лучшая альтернатива - переопределить CSS так, как вы хотите + отменить загрузку файла CSS по умолчанию. Этого можно достичь, передав false в качестве второго аргумента помощника вида gmaps или gmaps4rails. Смотрите здесь: https://github.com/apneadiving/Google-Maps-for-Rails/wiki/Miscellaneous

1 голос
/ 04 мая 2011

Вы можете установить его через css: 

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

См. Ответ автора драгоценного камня здесь: Gmaps4rails: настройка ширины и высоты карты

0 голосов
/ 11 июня 2012

У меня была та же проблема, и я решил ее по-разному. Я закомментировал ширину из 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;
}
0 голосов
/ 05 мая 2011

Я придерживаюсь подхода апноэ, но моя реализация может быть немного неловкой, т.е. наивной.

На мой взгляд, у меня есть следующая разметка. 

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

Я загружаю свой собственный gmaps4rails_welcome.css и не загружаю стандартную версию gmas4rails css, передавая «false» в качестве второго аргумента.

Мой файл 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;

}

Для каждого рендеринга карты у меня есть конкретная таблица стилей. Это работает.

Спасибо!

...