1

Google지도 클러스터 정보 창에 대한 페이지 매김을 설정하는 방법은 무엇입니까? IAM은 gmap3을 사용합니다. gmap3의 클러스터 정보 페이지 매기기

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> 

'; 

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

스피 가진 이벤트 목록은 어떻게 이벤트 '예술'내 gmap3.I의 정보창의 두 페이지에서 '코미디'gmap3에 새로운 오전받을 수 있나요?

답변

1

나는 그것을 풀었다. 각 마커의 세부 사항을 개별적으로 얻는 함수를 작성하고, 정보 창에 세부 사항을 표시하는 함수를 호출했다. 처음에는 izero으로 설정되었다. 함수 showinfodetails에서

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 함수에 전달됩니다를 감소시켜 얻을 것이다 prevj 클릭 이렇게 증가 얻을 것이다 nextj 각 클릭에 각각에 대한

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

을 쓴 해당 마커의 세부 정보가 표시됩니다.

우리는 전 세계적으로 선언

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

global_context_menu에서 컨텍스트를 얻을.

0

마치 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의 래퍼를 사용하는 경우 다르게 호출 될 수있다.

+0

안녕하세요 amenadiel 답장을 보내 주셔서 감사합니다. 하지만 _arts_ 및 _comedy_와 같은 20 개 이상의 이벤트가있을 수 있으므로 infowindow에 _tabs_를 사용할 수 없기를 바랍니다. 따라서 이러한 모든 이벤트에 탭 시스템을 사용하는 것은 어려운 작업이 될 것이며 디자인이 추악해질 것이라고 생각합니다. 그래서 저는 페이지 매김이 적절한 답이라고 생각합니다. 정보창의 페이지 매김을 구현하도록 도와 줄 수 있습니까? –