gmap3中集群信息窗口中的分页

Question

如何为谷歌地图集群信息窗口设置分页。我正在使用 gmap3。

 $(this).gmap3(
          {clear:"overlay"},
          {
          overlay:{
            latLng: cluster.main.getPosition(),
            options:{
              content:  eventlist,
              offset: {
                x:-46,
                y:-73
              }
            }
          }
        });

我的事件列表为

eventlist ='


    <div class='infobubble infobulle drive'>
        <div class='infobubble_wrap'>
          <div class='infobubble_event_text'>
            <div class='infobubble_event_names'>arts</div>
            <div class='infobubble_date'>Feb 06</div>
            <div class='infobubble_event_venue'>Bulldog</div>
          </div>
          <div class='infobubble_event_image'><img src=thumb.jpg></img></div>
         <div class='clear'></div>
        </div>
      </div>
      <div class='infobubble infobulle drive'>
        <div class='infobubble_wrap'>
          <div class='infobubble_event_text'>
            <div class='infobubble_event_names'>Comedy</div>
            <div class='infobubble_date'>Jun 13</div>
            <div class='infobubble_event_venue'>Our Little Comedy Theater</div>
          </div>
          <div class='infobubble_event_image'><img src=eventdefault_thumb.jpg></img></div>
          <div class='clear'></div>
        </div>
       </div>

';

如何在我的 gmap3 信息窗口的两个页面中获取我的活动“艺术”和“喜剧”。我是 gmap3 的新手？

Answer 1

我解决了。我编写了一个函数来单独获取每个标记的详细信息，并调用该函数以在信息窗口中显示详细信息。最初将i 设置为zero。

 function infowindowhtml(i)
            {
                context = global_context_menu;
                var markernum = context.length;
                var first = next = '';
                if (i == 0) {
                    first = '';
                } else {
                    var j = i - 1;
                    first = "<div class='prev_info' onclick='showinfodetails(" + j + ");'><<</div>";
                }
                if (i == (markernum - 1)) {
                    next = '';
                } else {
                    var j = i + 1;
                    next = "<div class='next_info' onclick='showinfodetails(" + j + ");'>>></div>";
                }
                var pagination = '<div>' + first + '<div class="middle_section">' + (i + 1) + '</div>' + next + '</div>';
                    var datastring = context[i].data;
                eventlist="    <div class='infobubble infobubble_cluster infobulle"+(datastring ? " drive" : "") + "'><div class='infobubble_wrap infobubble_wrap_cluster'><div class='infobubble_event_text'><div class='infobubble_event_names'>Comedy</div>" +"<div class='infobubble_date'>Jun 13</div>" +"<div class='infobubble_event_venue'>Our Little</div>" +"<div class='clear'></div>" + pagination + "</div></div>";
                return eventlist;
            }

在我写的函数showinfodetails中

    function showinfodetails(i) {
        eventlist = infowindowhtml(i);
        $('.infobubble_content').html(eventlist);
    }

所以每次点击next j 都会增加，每次点击prev j 会减少。这将传递给 showinfodetails 函数，并显示该标记的详细信息。

我们从

获取上下文

mouseover: function(cluster, event, context) {
                                    global_context_menu = context.data.markers;
}

global_context_menu 全局声明。

Answer 2

似乎 infobubble 构造函数的处理方式与我记忆中的不同。我会这样做：

var arts_tab="
    <div class='infobubble infobulle drive'>
        <div class='infobubble_wrap'>
            <div class='infobubble_event_text'>
                <div class='infobubble_event_names'>arts</div>
                <div class='infobubble_date'>Feb 06</div>
                <div class='infobubble_event_venue'>Bulldog</div>
            </div>
            <div class='infobubble_event_image'>
                <img src=thumb.jpg></img>
            </div>
            <div class='clear'></div>
        </div>
    </div>";

var comedy_tab="<div class='infobubble infobulle drive'>
    <div class='infobubble_wrap'>
        <div class='infobubble_event_text'>
            <div class='infobubble_event_names'>Comedy</div>
            <div class='infobubble_date'>Jun 13</div>
            <div class='infobubble_event_venue'>Our Little Comedy Theater</div>
        </div>
        <div class='infobubble_event_image'>
            <img src=eventdefault_thumb.jpg></img>
        </div>
        <div class='clear'></div>
    </div>
</div>";

infoBubble = new InfoBubble({
    maxWidth: 300
    }); 

infoBubble.addTab('Arts', arts_tab);
infoBubble.addTab('Comedy', comedy_tab);

但如果您使用 gmaps 的包装器，它的调用方式可能会有所不同。