0

我在使用 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 }) %>

通过“<%= yield :scripts %>”嵌入页面的 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;
}

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

我真的很感谢社区提供的任何帮助——一段时间以来，我一直在用这个键盘敲打我的脑袋。

4

1 回答 1

0

考虑到 jquery 的怪异，我怀疑与 onload 有某种类型的冲突（它也可能是引导程序）。

我不能直接使用 <%= yield :scripts %> ，但是如果我复制生成的代码并将其粘贴进去，则如下修改对 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>
于 2013-06-03T05:21:32.943 回答