Question

如何设置Google地图群集信息窗口的分页。我使用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

我解决了它。我编写了一个函数来单独获取每个标记的详细信息，并调用函数在infowindow中显示详细信息。最初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

好像信息帧构造函数的处理方式与我记忆的不同。我做了：

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的包装器，它的调用可能会有所不同。

gmap3中聚类信息的分页

2 个答案: