无法覆盖通过Gmaps4Rails Gem访问的Google Maps API的引导CSS [英] Having trouble overriding bootstrap css for Google Maps API accessed through Gmaps4Rails Gem

问题描述

我遵循Gmaps4Rails教程并尝试在引导框架中实现它，但遇到问题。地图加载不正确... 请看这里。放大功能不起作用。

我尝试了解决方法，但它只是略有帮助。这似乎是如何设置bootstrap的问题，或者我的require树不正确。请参阅下面的相关代码。

views / layouts / application.html.erb

 <！DOCTYPE html> 
< html> 
< head> 
< title><％= full_title（yield（：title））％>< / title> 
 
 <％= stylesheet_link_tagapplication，media：all，
data-turbolinks-track=> true％> 
 <％= javascript_include_tagapplication，
data-turbolinks-track=> true％> 
<％= csrf_meta_tags％> 
 <％= render'layouts / shim'％> 
 <％flash.each do | key，value | ％GT; 
 <％= content_tag（：div，value，class：alert alert  - ＃{key}）％> 
<％end％> 
< / head> 
  

...

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

  @importbootstrap; 
 
 / * MAP * / 
 
 #map img {
 max-width：none; 
} 
 #map标签{
 width：auto;显示：内联; 
 
  

...

application.css

  ... 
 *您可以自由地将应用程序范围的样式添加到此文件并且它们将出现在
 *编译文件的顶部，但通常最好为每个样式范围创建一个新文件。 
 * 
 * = require_self 
 * = require_tree。 
 * / 
  

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

 < head>< link rel =stylesheethref =reports.css.scss/>< /头> 
 
< script src =// maps.google.com/maps/api/js?v=3.13&amp;sensor=false&amp;libraries=geometrytype =text /的javascript>< /脚本> 
< script src ='// google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js'type ='text / javascript'> ;< /脚本> 
< script src ='// google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/src/richmarker-compiled.js'type ='text / javascript'><<< ; /脚本> 
 
 ... 
 
<％= link_to'新报告'，new_report_path％> 
 
< div style ='width：800px;'> 
< div id =mapstyle ='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，与'User '在gmaps4rails演示中

  //将所有与Reports控制器相关的样式放在这里。 
 //它们将自动包含在application.css中。 
 //您可以在这里使用Sass（SCSS）：http://sass-lang.com/ 
 
 
 
 #map img {
 max -width：none; 
} 
 #map标签{
 width：auto;显示：内联; 
} 
  

application.js

< pre $ // =需要jquery
//需要jquery_ujs
// =需要引导
// =需要turbolinks
// =要求下划线
// =需要gmaps / google
// = require_tree。


解决方案

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

  if（navigator.geolocation）
 navigator.geolocation.getCurrentPosition（displayOnMap）; 
 
函数displayOnMap（position）{
 var marker = handler.addMarker（{
 lat：position.coords.latitude，
 lng：position.coords.longitude， 
图片：{
 url：保留任何图片，
宽度：36，
高度：36 
}，
 infowindow：您
}）; 
 handler.map.centerOn（marker）; 
} 
  

更新的答案

tweetsfromdb.html.erb

 < table class = table table-stripedstyle ='width：100％; display：none;'id =tweetstable> 
< tr>第>图片< / th> 
 infowindow< / th> 
 lat< th> 
< th> lng< / th>< / tr> @tweets％中的推文
 <％;> 
< tr> 
< td> <％= tweet.profile_pic％GT; < / TD> 
< td> < img src =<％= tweet.profile_pic％>类= IMG-圆/> 
<％= tweet.tweet_text％> < b取代;< I>位置：其中％= tweet.location％GT;< / I>< / TD> 
< td> <％= tweet.lattitude％GT;< / TD> 
< td> <％= tweet.longitude％GT;< / TD> 
<％end％> 
< / table> 
  

已经通过地理编码确定了经度和纬度

script
创建Google地图

  var handler = Gmaps.build（'Google'）; 
 handler.buildMap（{internal：{id：'map'}}，function（）{
 if（navigator.geolocation）
 navigator.geolocation.getCurrentPosition（displayOnMap）; 
}）; 
 
函数displayOnMap（position）{
 var marker = handler.addMarker（{
 lat：position.coords.latitude，
 lng：position.coords.longitude， 
图片：{
 url：/images/pin_blue.png，
 width：36，
 height：36 
}，
 infowindow：你在这里！
}）; 
 handler.map.centerOn（marker）; 
 
 
 
 
 
 $ b 
 该脚本从表中读取数据并添加标记 
 
 $ b 
  $（＃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（）; 
 $ b}）; 
 array.push（arrayItem）; 
}）; 
 handler.addMarkers（array）; 
 handler.bounds.extendWith（array）; 
 handler.fitMapToBounds（）; 
}）; 
  
 
I am following the Gmaps4Rails tutorial and trying to implement it in a bootstrap framework, but am having problems.  The map won't load correctly...  See here.  Zooming in function does not work.

I tried the workaround but it has only helped marginally.  This appears to be a problem with how bootstrap is set up, or perhaps my require tree is not correct.  See below for my relevant code.

views/layouts/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 --> this is the main stylesheet for my app, and I added the workaround code here just to see if it would make a difference, but it did not.
@import "bootstrap";

/*MAP*/

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

application.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 --> home page where map is displayed
<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 --> The name of my model is Reports, as opposed to 'User' in the gmaps4rails demo
// 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; 
} 
application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require underscore
//= require gmaps/google
//= require_tree .

解决方案
I had this same problem. Could you try using geolocation method and set the map centered on user's location. Check it its working.   
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);
}
Updated answer

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>
The lattitude and longitude have been identified by geocoding the locations

script
To Create the google maps
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);

}
This script reads the data from the table and adds the markers
 $("#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();
});


                        
这篇关于无法覆盖通过Gmaps4Rails Gem访问的Google Maps API的引导CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！