Пагинация в информационном окне кластеров в gmap3

Как настроить нумерацию страниц для информационного окна кластера карт 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?


google-maps google-maps-api-3 map markerclusterer jquery-gmap3
person Arun Thomas    schedule 09.06.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я решил эту проблему. Я написал функцию для получения сведений о каждом маркере в отдельности и вызвал функцию для отображения сведений в информационном окне. Первоначально 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 объявлен глобально.

person Arun Thomas    schedule 12.06.2014

arrow_upward
0
arrow_downward

Кажется, что конструктор информационных пузырей обрабатывался не так, как я помню. Я бы сделал:

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, это может называться по-другому.

person ffflabs    schedule 09.06.2014
comment
Привет, аменадиэль, спасибо за ваш ответ. Но я надеюсь, что не смогу использовать вкладки для информационного окна, потому что может быть двадцать или даже больше событий, таких как искусство и комедия. Таким образом, использование системы вкладок для всех этих событий будет сложной задачей, и я думаю, что дизайн станет уродливым. Поэтому я думаю, что разбивка на страницы будет подходящим ответом. Можете ли вы помочь мне реализовать разбиение на страницы для информационного окна. - person Arun Thomas; 10.06.2014