tabview p：tab中的gmap不起作用primefaces jsf答案

【问题标题】：gmap in tabview p:tab doesn't work primefaces jsftabview p：tab中的gmap不起作用primefaces jsf
【发布时间】：2013-03-21 11:59:50
【问题描述】：

我有一个对话框，其中包含带有多个选项卡的选项卡视图。在我的一个选项卡中，我必须显示一个 gmap 组件。无论我尝试过什么都没有奏效。这是我的sn-p：

<p:dialog header="Proje Detayı" widgetVar="carDialog" resizable="false" id="display"  modal="true" style="font-size: 10px;font-weight: bold;" width="800" appendToBody="true" minHeight="1000">                          
                <p:commandButton value="Harita Lokasyonu" onclick="carDialog.hide();" oncomplete="mapperDijaloga.show()"/>
                <p:tabView id="tabView" cache="true" orientation="top" style="font-size: 10px;font-weight: bold;"> 
                    <p:tab id="tab1" title="Proje Bilgileri">
                        <h:panelGrid columns="2" cellpadding="2"> 
                            <h:outputText value="Proje Adı: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.projectname}" style="font-weight: bold; font-size: 13px;"/>  

                            <h:outputText value="Proje Detayı: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.projectexp}" style="font-weight: bold; font-size: 13px;"/>  

                            <h:outputText value="Proje Koordinatları: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.projectcoordlat}, #{projectsController.selectedP.projectcoordlon}" style="font-weight: bold; font-size: 13px;"/>  

                            <h:outputText value="İlçe: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.district}" style="font-weight: bold; font-size: 13px;"/>  

                            <h:outputText value="Sektör: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.sector}" style="font-weight: bold; font-size: 13px;"/>       

                            <h:outputText value="İş Durumu: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.workstatus}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Sorumlu Müd. Yard.: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.assistant}" style="font-weight: bold; font-size: 13px;"/>      

                            <h:outputText value="İhale Adı: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.bidname}" style="font-weight: bold; font-size: 13px;"/>      

                            <h:outputText value="Firma: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.company}" style="font-weight: bold; font-size: 13px;"/>  

                            <h:outputText value="İhale Bedeli: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.biddcost}" style="font-weight: bold; font-size: 13px;"/>  

                            <h:outputText value="Ödenen Hak Ediş Tutarı: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.costpaid}" style="font-weight: bold; font-size: 13px;"/>   

                            <h:outputText value="SÜRE BİLGİSİ" style="font-weight: bold; font-size: 13px; float: right; font-style: italic"/><p:separator />

                            <h:outputText value="Başlangıç Tarihi: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.startdate}" style="font-weight: bold; font-size: 13px;"/>  

                            <h:outputText value="İşin Süresi: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.processtime}" style="font-weight: bold; font-size: 13px;"/>     

                            <h:outputText value="Bitiş Tarihi: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.enddate}" style="font-weight: bold; font-size: 13px;"/> 

                        </h:panelGrid>
                    </p:tab>  

                    <p:tab id="tab2" title="Teknik Bilgiler">  

                        <h:panelGrid columns="2" cellpadding="3"> 

                            <h:outputText value="Ada/Parsel: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.parcel}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Plan Durumu: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.planstatus}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Yolun Genişliği: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.roadwidth}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Yolun Uzunluğu: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.roadlength}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Toplam Alan: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.totalarea}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="İlave Bilgi: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.extrainfo}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Teklif Birim Fiyat: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.unitoffer}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Yapım Yaklaşık Maliyeti: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.approxcost}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Proje Maliyeti: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.projectcost}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Dosya Kodu: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.filenu}" style="font-weight: bold; font-size: 13px;"/> 

                        </h:panelGrid>
                    </p:tab>  

                    <p:tab id="tab3" title="Proje Teşkilatı">  

                        <h:panelGrid columns="2" cellpadding="3">

                            <h:outputText value="Şef: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.chef}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Mimar: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.arch}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="İnşaat Mühendisi: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.streng}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Peyzaj Mimarı: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.landarch}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Elektrik Mühendisi: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.eleceng}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Jeoloji Mühendisi: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.geoeng}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Makine Mühendisi: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.macheng}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Harita Mühendisi: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.mapeng}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Şehir Plancısı: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.planeng}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="İHALE ÖNCESİ TAKİP" style="font-weight: bold; font-size: 13px; float: right; font-style: italic"/><p:separator />

                            <h:outputText value="Sorumlu Müd. Yard.: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.assistantbefore}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Sorumlu Müh./Mimar: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.engarch}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="UYGULAMACI KONTROL TEŞKİLATI" style="font-weight: bold; font-size: 13px; float: right; font-style: italic"/><p:separator />

                            <h:outputText value="Müdür Yard.: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.mdyard}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Mimar: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.mim}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="İnşaat Mühendisi: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.ins}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Peyzaj Mimarı: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.peyz}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Elektrik Mühendisi: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.elek}" style="font-weight: bold; font-size: 13px;"/> 

                        </h:panelGrid>

                    </p:tab>  

                    <p:tab id="tab4" title="Firma Bilgisi">  
                        <h:panelGrid columns="2" cellpadding="3">

                            <h:outputText value="Yetkili Kişi: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.compres}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Görevi: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.compresjob}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Telefon: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.comptel}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="Adres: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.compaddress}" style="font-weight: bold; font-size: 13px;"/> 

                            <h:outputText value="E-Posta: " style="font-size: 13px;"/>  
                            <h:outputText value="#{projectsController.selectedP.compmail}" style="font-weight: bold; font-size: 13px;"/>     
                        </h:panelGrid>
                    </p:tab>  
                    <p:tab id="map" title="Lokasyon">                            
                        <br />
                        <h:form>
                            <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript" />
                            <p:gmap center="41.381542, 2.122893" zoom="15" type="HYBRID" style="width:600px;height:400px" widgetVar="mymap"/>  
                        </h:form>      
                    </p:tab>
                </p:tabView>
            </p:dialog>

在最后一个选项卡中出现问题：

                        <p:tab id="map" title="Lokasyon">                            
                        <br />
                        <h:form>
                            <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript" />
                            <p:gmap center="41.381542, 2.122893" zoom="15" type="HYBRID" style="width:600px;height:400px" widgetVar="mymap"/>  
                        </h:form>      
                    </p:tab>

我尝试过更改 z-index，但也没有用。如何克服这个问题？提前致谢。

【问题讨论】：

标签： jsf primefaces facelets

【解决方案1】：

我认为您需要在选择选项卡时重新绘制 MAP 小部件。

以下对我有用：

为您的地图表单命名，使其可寻址（例如“myMapForm”）
捕获 ajax tabChange 事件以重新绘制地图。

试试<p:ajax event="tabChange" update=":myMapForm:map:myMap"/>

干杯。

【讨论】：

【解决方案2】：

这个解决方案会在加载后产生一些令人不快的闪烁，我认为这是由于地图的双重渲染造成的。一个更好的解决方案（至少乍一看）似乎是在 tabView 容器上使用 attribyte dynamic="true"，所以你会得到类似

<p:tabView dynamic="true">
  <p:tab id="xxx" title="xxx">
      .
  </p:tab>
  <p:tab id="yyy" title="yyy">
      <p:gmap ............ />
  </p:tab>
</p:tabView>

【讨论】：