Question

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

I tried the workaround但它只是略有帮助。这似乎是如何设置引导程序的问题，或者可能是我的require树不正确。请参阅下面的相关代码。

视图/布局/ 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 - ＆gt;这是我的应用程序的主要样式表，我在这里添加了变通方法代码，看它是否会有所作为，但事实并非如此。

@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 - ＆gt;显示地图的主页

<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 - ＆gt;我的模型的名称是Reports，而不是gmaps4rails演示中的“User”

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

Answer 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();
});

无法覆盖通过Gmaps4Rails Gem访问的Google Maps API的bootstrap css

1 个答案: