无法覆盖通过Gmaps4Rails Gem访问的Google Maps API的引导css
我正在学习Gmaps4Rails教程,并试图在引导框架中实现它,但遇到了一些问题。地图无法正确加载。。。放大功能不起作用 但这只起到了微乎其微的作用。这似乎是如何设置引导的问题,或者我的require树不正确。有关我的相关代码,请参见下文 视图/布局/application.html.erb无法覆盖通过Gmaps4Rails Gem访问的Google Maps API的引导css,css,ruby-on-rails,google-maps,twitter-bootstrap,gmaps4rails,Css,Ruby On Rails,Google Maps,Twitter Bootstrap,Gmaps4rails,我正在学习Gmaps4Rails教程,并试图在引导框架中实现它,但遇到了一些问题。地图无法正确加载。。。放大功能不起作用 但这只起到了微乎其微的作用。这似乎是如何设置引导的问题,或者我的require树不正确。有关我的相关代码,请参见下文 视图/布局/application.html.erb <!DOCTYPE html> <html> <head> <title><%= full_title(yield(:title)) %&g
<!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>
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->显示地图的主页
<head><link rel="stylesheet" href="reports.css.scss" /></head>
<script src="//maps.google.com/maps/api/js?v=3.13&sensor=false&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();
});
application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require underscore
//= require gmaps/google
//= require_tree .
我也有同样的问题。你能尝试使用地理定位方法,并将地图设置为以用户位置为中心吗。检查它的工作情况
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
此脚本从表中读取数据并添加标记
将此代码添加到脚本末尾index.html.erb的脚本标记中。请参阅并查看地理位置示例的代码。谢谢,这使我的地图得以显示,但右上角仍然无法正确显示。我的报告也没有出现在地图上。我的项目也面临着同样的问题。“我的地图”在左上角有一个可见的小矩形,但当你调整浏览器的大小时,它会显示出来,你可以试试看。对于填充标记,我有一个适合我的解决方法。我为选项卡式面板添加了一个onclick。我在一个隐藏表中显示数据,然后使用jquery创建标记。
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require underscore
//= require gmaps/google
//= require_tree .
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);
}
<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();
});