Question

我刚刚实现了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 米歇尔

Gmaps4Rails：创建自定义侧边栏，其中包含指向信息窗口的链接

0 个答案: