无法覆盖通过 Gmaps4Rails Gem 访问的 Google Maps API 的引导 css答案

【问题标题】：Having trouble overriding bootstrap css for Google Maps API accessed through Gmaps4Rails Gem无法覆盖通过 Gmaps4Rails Gem 访问的 Google Maps API 的引导 css
【发布时间】：2014-04-25 13:35:18
【问题描述】：

我正在关注 Gmaps4Rails 教程并尝试在引导框架中实现它，但遇到了问题。地图无法正确加载...See here.放大功能不起作用。

I tried the workaround 但它只起到了一点作用。这似乎是如何设置引导程序的问题，或者我的需求树可能不正确。我的相关代码见下文。

视图/布局/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>

    <%= stylesheet_link_tag "application", media: "all",
                            "data-turbolinks-track" => true %>
    <%= javascript_include_tag "application", 
                               "data-turbolinks-track" => true %>
    <%= csrf_meta_tags %>
    <%= render 'layouts/shim' %>
    <% flash.each do |key, value| %>
      <%= content_tag(:div, value, class: "alert alert-#{key}") %>
    <% end %>
  </head>

...

custom.css.scss --> 这是我的应用程序的主要样式表，我在这里添加了解决方法代码只是为了看看它是否会有所作为，但它没有。

@import "bootstrap";

/*MAP*/

#map img { 
  max-width: none;
}
#map label { 
  width: auto; display:inline; 
}

...

应用程序.css

...
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
 */

index.html.erb --> 显示地图的主页

<head><link rel="stylesheet" href="reports.css.scss" /></head>

<script src="//maps.google.com/maps/api/js?v=3.13&amp;sensor=false&amp;libraries=geometry" type="text/javascript"></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js' type='text/javascript'></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/src/richmarker-compiled.js' type='text/javascript'></script>

...

<%= link_to 'New Report', new_report_path %>

<div style='width: 800px;'>
  <div id="map" style='width: 800px; height: 400px;'></div>
</div>

<script type="text/javascript">
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
  markers = handler.addMarkers(<%=raw @hash.to_json %>);
  handler.bounds.extendWith(markers);
  handler.fitMapToBounds();
});

reports.css.scss --> 我的模型名称是 Reports，而不是 gmaps4rails 演示中的“用户”

// Place all the styles related to the Reports controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/



#map img { 
  max-width: none;
}
#map label { 
  width: auto; display:inline; 
}

应用程序.js

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require underscore
//= require gmaps/google
//= require_tree .

【问题讨论】：

标签： css ruby-on-rails google-maps twitter-bootstrap gmaps4rails

【解决方案1】：

我遇到了同样的问题。您能否尝试使用地理定位方法并将地图设置为以用户位置为中心。检查它的工作。

if(navigator.geolocation)
navigator.geolocation.getCurrentPosition(displayOnMap);

 function displayOnMap(position){
 var marker = handler.addMarker({
 lat: position.coords.latitude,
 lng: position.coords.longitude,
 picture: {
      url: "Keep Any Image",
      width:  36,
      height: 36
    },
    infowindow: "You"
});
handler.map.centerOn(marker);
}

更新答案

tweetsfromdb.html.erb

<table class="table table-striped" style='width: 100%; display:none;' id="tweetstable" >
<tr><th>Picture</th>
<th>infowindow</th>
 <th>lat</th>
<th>lng</th></tr>
<% for tweet in @tweets %>
<tr>
<td> <%=tweet.profile_pic%> </td>
<td> <img src="<%=tweet.profile_pic%>" class="img-circle"/>
<%=tweet.tweet_text%>  <b><i>Location:<%=tweet.location%></i></td>
<td>  <%=tweet.lattitude%></td>
<td>  <%=tweet.longitude%></td>
 <% end %>
</table>

已通过地理编码识别出经纬度

脚本创建谷歌地图

var handler = Gmaps.build('Google');
handler.buildMap({ internal: {id: 'map'} }, function(){
  if(navigator.geolocation)
navigator.geolocation.getCurrentPosition(displayOnMap);
});

function displayOnMap(position){
  var marker = handler.addMarker({
    lat: position.coords.latitude,
    lng: position.coords.longitude,
    picture: {
      url: "/images/pin_blue.png",
      width:  36,
      height: 36
    },
    infowindow: "You are here !"
  });
 handler.map.centerOn(marker);

}

此脚本从表格中读取数据并添加标记

 $("#googlemaps").click(function(){

  var array = [];
    var headers = [];
 $('#tweetstable th').each(function(index, item) {
    headers[index] = $(item).html();
});
$('#tweetstable tr').has('td').each(function() {
    var arrayItem = {};
    $('td', $(this)).each(function(index, item) {
        arrayItem[headers[index]] = $(item).html();
    });
    array.push(arrayItem);
});
handler.addMarkers(array);
handler.bounds.extendWith(array);
handler.fitMapToBounds();
});

【讨论】：

在脚本末尾index.html.erb的script标签中添加这段代码。请参阅map example for this gem 并查看地理定位示例的代码。
谢谢，这可以显示我的地图，但右上角仍然无法正确显示。我的“报告”标记也没有出现在地图上。
我的项目也面临同样的问题。我的地图在左上角有可见的小矩形，但是当您调整浏览器大小时它会显示，您可以尝试一下。对于填充标记，我有一个适合我的解决方法。我为选项卡式面板添加了一个 onclick()。我在隐藏表中显示数据，然后使用 jquery 创建标记。