我刚刚实现了 Gmaps4Rails,一切正常。唯一的挑战是设置自定义侧边栏而不是 gem 提供的默认 ul/li 模板。
基本上,我需要模仿现有的侧边栏组件,完全控制元素及其样式。
在我看来,我创建了一个显示各种商店的表,每个商店都有一个 id,用于在 content_for 脚本的 Gmaps 回调方法中关联一个侦听器。
<div class="span11">
<table id="sample-table-1" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Butik</th>
<th>Ejer</th>
<th>Gade</th>
<th>Husnummer</th>
<th>Postnummer</th>
<th>By</th>
</tr>
</thead>
<tbody>
<% @merchant_stores.each do |merchant_store| %>
<tr>
<td ><%= link_to merchant_store.store_name, "javascript:void(0)", id: "merchant-" + merchant_store.id.to_s %></td>
<td><%= merchant_store.owner %></td>
<td><%= merchant_store.street %></td>
<td><%= merchant_store.house_number %></td>
<td><%= merchant_store.postal_code %></td>
<td><%= merchant_store.city %></td>
</tr>
<% end %>
</tbody>
</table>
还有我的回调..
<% content_for :scripts do %>
<script type="text/javascript">
Gmaps.map.infobox = function(boxText) {
return {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, 0)
,zIndex: null
,boxStyle: {
background: "url('http://google-maps-utility-library- v3.googlecode.com/svn/tags/infobox/1.1.5/examples/tipbox.gif') no-repeat"
,opacity: 1.0
,width: "300px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
}};
Gmaps.map.callback = function() {
//whatever you want here
for (var i = 0; i < Gmaps.map.markers.length; ++i) {
var marker = Gmaps.map.markers[i];
var map = Gmaps.map.serviceObject;
anchor = document.getElementById("merchant-" + marker.merchant_id);
anchor.addEventListener("click", marker.infowindow.open(map, marker.serviceObject), false);
}
}
</script>
<% end %>
我尝试了许多循环标记的方法,但没有一种方法与标准侧边栏组件的工作方式相同。所以我希望有人能修复这个伟大的宝石。
我尝试从 gmails4rrails.base.js(第 325-342 行)复制代码,但无济于事。
希望你能帮忙。
BR米歇尔