Question

使用gmap4rails我有一个非常奇怪的问题。我完全按照github上的设置，我得到一个空白框。我可以看到正在调用地图提供程序（在本例中为Bing），但是从不渲染任何地图。

在分析javascript时，Gmap4rails代码永远不会被执行。

我的观点如下：

<%= gmaps("markers" => {"data" => @map},
"map_options" => { "zoom" => 15, "provider" => "bing", "provider_key" => ENV['BING_MAPS_API_KEY'], "auto_adjust" => true }) %>

通过“＆lt;％= yield：scripts％＆gt;”在页面中嵌入Javascript （我在这里删除了我的API密钥，但它在我的页面上）：

<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0" type="text/javascript"></script>
<script type="text/javascript">
Gmaps.map = new Gmaps4RailsBing();
Gmaps.load_map = function() {
Gmaps.map.map_options.zoom = 15;
Gmaps.map.map_options.provider = "bing";
Gmaps.map.map_options.provider_key = "<key here>";
Gmaps.map.initialize();
Gmaps.map.markers = [{"lat":39.45000076293945,"lng":-98.90799713134766}];
Gmaps.map.create_markers();
Gmaps.map.adjustMapToBounds();
Gmaps.map.callback();
};
Gmaps.oldOnload = window.onload;
window.onload = function() { Gmaps.triggerOldOnload(); Gmaps.loadMaps(); };
</script>

如果我从js清单中删除jquery，则会显示地图并执行gmap4rails javascript。（我只是偶然发现了这个，因为我使用的是jquery-rails-cdn，并认为它可能是冲突的，所以我删除了它，没有重新添加jquery到清单）。

我认为它可能与onload调用有关，也许它应该是一个现成的调用呢？

我还应该提一下，我正在使用Twitter Bootstrap。我确实按照建议添加了css修改，并且需要通过sass文件。

css看起来像这样：

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

.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: 800px;
  height: 400px;
}

.bing_map {
   position: absolute;
   top: 20;
   left: 10;
   width: 400px;
   height: 400px;
   border:#555555 2px solid;
}

最终目标是将地图放在引导标签窗格中（可能是另一个令人头痛的问题），但现在我只是想让它显示在页面上。

我真的很感激社区的任何帮助 - 一直在用键盘敲打键盘。

Answer 1

考虑到jquery的奇怪性，我怀疑与onload有某种类型的冲突（它也可能是bootstrap）。

我无法使用＆lt;％= yield：scripts％＆gt;直接，但如果我复制生成的代码并粘贴它，修改对jquery本机处理程序的onload调用，如下所示一切正常。

<div class="map_container">
    <div id="map" class="bing_map"></div>
</div>
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0" type="text/javascript"></script>
<script type="text/javascript">
    Gmaps.map = new Gmaps4RailsBing();
    Gmaps.load_map = function() {
    Gmaps.map.map_options.provider = "bing";
    Gmaps.map.map_options.provider_key = "<key here>";
    Gmaps.map.map_options.autozoom = false;
    Gmaps.map.map_options.zoom = 15;
    Gmaps.map.initialize();
    Gmaps.map.markers = [{"lat":30.40438547730446,"lng":-86.61866784095764}];
    Gmaps.map.create_markers();
    Gmaps.map.adjustMapToBounds();
    Gmaps.map.callback();
    };
    Gmaps.oldOnload = $(window).load();
    $(window).load(function() { Gmaps.triggerOldOnload(); Gmaps.loadMaps(); });
</script>

除非没有调用jquery，否则gmaps4rails不显示map

1 个答案: